Question

我无法找到如何从另一个变量值创建变量。

我从AJAX调用中获取此变量（使用vue-resources）：

langs: {1:'fr', 2:'en', 3:'ar'},

但是，我不知道langs会有多少属性。

如何动态获取此变量：

newVar: {
  has_lang: '1',
  values: [{ is: 'fr', val:''}, { is: 'en', val:''}, { is: 'ar', val:''}]
},

因此，在newVar中，fr，en和ar属性已使用langs中的值自动生成。

我打算使用values数组使用v-model绑定到md-input输入的值：

<md-input-container v-for="value in newVar.values">
  <label>@{{ attribute.attribute }} @{{ value.is }}</label>
  <md-input v-model="value.val"></md-input>
</md-input-container>

这种操作是最佳做法吗？因为我无法找到使用v-model来解决从v-for循环生成的输入的解决方案。

Answer 1

只要newVar属性发生更改，就可以使用观察程序设置langs属性。如果您将mounted变量作为道具传递或在langs内定义，则还需要在data()生命周期事件期间执行此操作。

在你的情况下，我会在两个点添加一个方法来调用：

data() {
  return {
    langs: {1:'fr', 2:'en', 3:'ar'},
    newVar: {},
  };
},
methods: {
  updateValues() {
    let newVar = {
      has_lang: (this.langs !== {}) ? '1' : '0',
      values: [],
    };

    for (let lang in this.langs) {
      newVar.values.push({ is: this.langs[lang], val: '' });
    }

    this.newVar = newVar;
  }
},
watch: {
  langs() {
    this.updateValues();
  }
},
mounted() {
  this.updateValues();
}

Here's a CodePen.

Vue JavaScript从其他变量值创建变量

1 个答案: