我想动态创建 Vue 组件的新实例，并在每个实例上附加信息。我的代码有什么问题？

Question

我想做的事情：

我有多个 select 个元素
每次我从中选择一个选项时，该选项都会添加到关键字数组中
每个关键字将显示在 "tag" 组件中
这些标签中的每一个都可以删除，这将取消设置我的关键字列表

注意：这与 Laravel 和 Blade 模板绑定，因此 @ 位于小胡子语法之前。

模板

<select @change="switchType">
    <option v-for="type in types" value="@{{ type.value }}">@{{ type.text }}</option> 
</select>

...

<tag v-for="keyword in keywords" model="@{{ keyword.model }}" identifier="@{{ keyword.id }}" text="@{{ keyword.text }}"></tag>

JS

const API_TYPES = '/api/types';

var vm = new Vue({
    el: '.search',
    data: {
        types: [],
        type: null,
        keywords: [],
    },

    ready: function() {
        this.$http.get(API_TYPES).then(function(types) {
            this.$set('types', types.body)
        });
    },

    methods: {
        search: function() {
            if (this.type) {
                this.keywords.push({
                    model: 'type',
                    identifier: this.type.id,
                    text: this.type.name
                })
            }
        },

        switchType: function(event) {
            var self = this
            var value = event.target.value
            console.log(value)
            this.$set('type', {id: value, name: event.target[value].text})
            self.search()
        },
    },

    components: {
        'tag': {
            template: `
                <span class="tag is-warning is-medium">
                    {{ model }} {{ identifier }} {{ text }}
                    <button class="delete is-small" @click="removeTag"></button>
                </span>
            `,
            props: [
                'model',
                'identifier',
                'text'
            ],
            methods: {
                removeTag: function () {
                    this.$el.remove()
                }
            }
        }
    }
})

简而言之：我想做 Something like this 但黄色药丸项目没有发送数据，尽管已正确创建。

我做错了什么？我对这种以数据为中心的方法还很陌生，所以如果您发现我的代码有一些不一致之处，请告诉我。谢谢！

Answer 1

你所做的很多事情都是Vue 1语法，但你使用的是Vue 2，所以首先：

ready() 生命周期挂钩已被弃用，您现在可以使用 created():

created: function() {
    this.$http.get(API_TYPES).then(function(types) {
        this.$set('types', types.body)
    });
}

Interpolation inside attributes 也被删除了，本质上你不能在将模型数据分配给属性时使用（或需要）handlebars（在 HTML 中仍然可以），所以，你应该移除 value 的车把并改用 v-bind（您也可以只使用冒号作为 v-bind 的 shorthand，例如 :value="type.value"）：

<select @change="switchType">
    <option v-for="type in types" v-bind:value="type.value">@{{ type.text }}</option> 
</select>

我个人会使用 v-model 绑定我的 select 框，而不是尝试手动处理更改，但在没有看到您的整个项目的情况下，我不能肯定地说这会是适用于您的项目，但基本上您将每个 select box 绑定到数组的一个元素：

标记

  <select v-model="selected[0]">
    <option v-for="type in types" v-bind:value="type.value" v-text="type.text"></option>
  </select>

    <select v-model="selected[1]">
    <option v-for="type in types" v-bind:value="type.value" v-text="type.text"></option>
  </select>

查看模型：

var vm = new Vue({
  el: '#app',
  data: {
    types: [{
      value: 'foo',
      text: 'foo'
    }, {
      value: 'bar',
      text: 'bar'
    }, {
      value: 'baz',
      text: 'baz'
    }],
    selected: []
  }
})

如果你想在 selection 改变时做点什么，你可以添加一个观察者：

  watch: {
    selected: function(val){
      // do something
      console.log('selected updated to: ' + val);
    }
  }

这是用于此的 JSFiddle：https://jsfiddle.net/utf169mw/

如果您遇到其他问题 Vue 有一个迁移指南：https://vuejs.org/v2/guide/migration.html

您可以在以下位置找到 2.0 文档：https://vuejs.org/v2/guide/

当然你可以在这里问，也记得在你的浏览器developer tools下检查你的console，因为Vue一般会告诉你问题是什么。

我想动态创建 Vue 组件的新实例，并在每个实例上附加信息。我的代码有什么问题？

I want to dynamically create new instances of a Vue component with information attached to each of them. What's wrong with my code?

javascript

vue.js

vue-component