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

Question

我想做的事:

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

注意:这与 Laravel 和 Blade 模板绑定(bind)，因此 @ 位于 Mustache 语法之前。

模板

<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() 生命周期 Hook 已被弃用，您现在使用 created():

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

属性内部的

Interpolation 也已被删除，本质上在将模型数据分配给属性时不能使用 Handlebars (或需要)(在 HTML 中仍然可以)，因此，您应该删除 Handlebars 对于 value 并使用 v-bind (您也可以使用冒号作为 v-bind 的简写，例如 :value ="type.value"):

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

我个人会使用 v-model 绑定(bind)我的选择框，而不是尝试手动处理更改，但在没有看到您的整个项目的情况下，我无法确定这是否合适对于您的项目，但基本上您将每个选择框绑定(bind)到数组的一个元素:

标记

  <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: []
  }
})

如果您想在选择更改时执行某些操作，只需添加一个观察者即可:

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

这是 JSFiddle:https://jsfiddle.net/utf169mw/

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

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

当然你可以在这里问，同时记得检查你的浏览器开发者工具下的控制台，因为Vue一般会告诉你问题是什么。