将 v-model 值从一个组件传递到模板

Question

I am new in Vue.js and recently, I faced a problem that I should pass a value to the v-model of a template in main.js. I have the next template :

In main.js

  Vue.component("app-input", {
  template: ` 
   <b-row class="my-1 key">
      <b-col sm="5" class="text_aln_rht">
        <label>{{labelName}}</label>
     </b-col>
     <b-col sm="7">
      <b-form-input 
        size="sm"
        v-model="val"
      ></b-form-input>
    </b-col>
  </b-row>
    `,
 props: {
   labelName: String,
   val: String
 },
  methods: {
 }
});

This is code from the component

example.vue

    <app-input id="MF" name="TYPE_U32" labelName="test" val="Text"></app-input>

Thanks

Answer 1

You need to bind your prop value like below

<app-input id="MF" name="TYPE_U32" :labelName="test" :val="Text"></app-input>

If your prop value is not data ( just string ) , use single squote

<app-input id="MF" name="TYPE_U32" :labelName="'test'" :val="'Text'"></app-input>