2017-03-28 9 views
1

簡単な質問:新しいプロパティとしてオブジェクトを見ることは可能ですか?私はそれが動作する最初のアイテムの切り替え 『「私はをクリックしてください。 』リストの最初の項目のプロパティ「ショー」を初期化するJSFiddleで オブジェクトに新しいプロパティがあるときの監視方法

しかし、他の項目について

(つまり、取得「ショー」動的プロパティ)とmyObjectというために(動的に取得する「TEST2」プロパティ)、それはあなたが、リストの最初の項目を切り替える場合にのみリフレッシュです!

私の場合は、私は、トグルはすぐに動作することを望む。

誰か説明がありますか?

new Vue({ 
 
    el: "#app", 
 
    data: function() { 
 
    return { 
 
    \t myObject: { test: 'test' }, 
 
     list: [{ 
 
     value: 1, 
 
     show: true 
 
     }, { 
 
     value: 2 
 
     }, { 
 
     value: 3 
 
     }, { 
 
     value: 4 
 
     }, { 
 
     value: 5 
 
     }] 
 
    } 
 
    }, 
 
    methods: { 
 
    toggleItem: function(item) { 
 
    \t if(!item.show) item.show = true; 
 
    \t else item.show = !item.show; 
 
     console.log(item.show) 
 
     this.myObject.test2 = 'test2'; 
 
    } 
 
    }, 
 
    watch: { 
 
    \t list: function(newValue) { 
 
    \t console.log('NEW VALUE: ', newValue); 
 
    } 
 
    } 
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.5/vue.js"></script> 
 

 
<div id="app"> 
 
{{ myObject }} 
 
    <div v-for="item in list"> 
 
    <span v-if="item.show"> 
 
     {{ item.value }} 
 
    </span> 
 
    <button @click="toggleItem(item)" type="button">Toggle !</button> 
 
    </div> 
 
</div>

+1

にあらかじめすべてのプロパティを設定することをお勧め私は何が必要だと思うVue.setを使用することです。https://vuejs.org/v2/api /#Vue-set – Potray

+0

ありがとうございました! – SLYcee

答えて

2

Vueのは、新しいプロパティを拾う助けるために、あなたはそれらを追加するVue.set()/this.$setを使用する必要があります。そうしないと、Vueは追加を検出できず、新しいプロパティは無効になりません。

if(!item.show) this.$set(item, 'show', true) 

https://vuejs.org/v2/api/#Vue-set

一般的に、我々は強くdata()

関連する問題