Vue JavaScript從其他變量值創建變量

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，自動使用langs值已產生fr，en和ar性能。

我計劃使用values陣列使用V模型綁定到我的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

每當langs屬性更改時，使用觀察者設置newVar屬性。如果您將langs變量作爲道具傳遞或在data()內定義它，則還需要在mounted生命週期事件中執行此操作。

在你的情況，我想補充的方法，在這兩個點打電話：

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.