Блог

Главная - Вопросы по программированию - Не могу ссылаться на данные в v-модели в динамических компонентах через шаблон

Не могу ссылаться на данные в v-модели в динамических компонентах через шаблон

#javascript #vue.js #vuejs2 #vue-component

#javascript #vue.js #vuejs2 #vue-компонент

Вопрос:

Мой VueJS и HTML-код ниже:

Я получаю сообщение об ошибке:

[Предупреждение Vue]: свойство или метод «tempdt» не определены в экземпляре, но на них ссылаются во время визуализации. Убедитесь, что это свойство является реактивным либо в параметре data, либо для компонентов на основе классов, путем инициализации свойства. См.: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties .

Может кто-нибудь подсказать мне, какую ошибку я делаю, и как правильно ссылаться на данные из динамического компонента?

 const Comp = {
  template: '<div><select v-model="tempdt"><option>hi</option></select><input type="text"  :value="[[tempdt]]" ></input></div>'
}

new Vue({
  delimiters: ["[[", "]]"],
  el: "#app",

  data: {
    tempdt: '',
    components: [Comp]
  },

  methods: {
    add() {
      this.components.push(Comp)
    }
  }
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="add">Add Component</button>
  <component v-for="(component, index) in components" :key="index" :is="component" />
</div>

Ответ №1:

Определите компонент, используя Vue.component его имя в качестве первого параметра, затем переместите это свойство в этот компонент.

 Vue.component('my-comp', {
  data() {
    return {
      tempdt: '',
    }
  },
  template: '<div><select v-model="tempdt"><option>hi</option></select><input type="text"  :value="[[tempdt]]" ></input></div>'
})
new Vue({
  delimiters: ["[[", "]]"],
  el: "#app",

  data: {

    components: ["my-comp"]
  },

  methods: {
    add() {
      this.components.push(Comp)
    }
  }
})  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button type="button" @click="add">Add Component</button>
  <component v-for="(component, index) in components" :key="index" :is="component" />
</div>