Math.randomでのv-bindの動作が期待通りではない

Question

vueコンポーネントを使用してスパンの配列のスタイルをランダムに生成しようとしています。私はメッセージを分割し、v-forを使用して、それぞれ別のスパンをそれぞれの単語で表示しています。

const textFx = Vue.component('text-fx', { 
    template: '<div class="textFx"><span v-bind:style="{opacity: Math.random().toFixed(2)}" v-for="words in wordArray">{{words}}</span></div>', 
    props:['message'], 
    data: function() { 
    return { 
     wordArray: [] 
    } 
    }, 
    methods: { 
    setMessage: function() { 
     this.wordArray = this.parseMessage; 
    }, 
    }, 
    computed: { 
    parseMessage: function() { 
     var temp = this.message.split(" "); 
     for(var i = 0; i < temp.length - 1; i++) { 
     temp[i] += " "; 
     } 
     return temp; 
    }, 
    }, 
    created: function() { 
    this.setMessage(); 
    } 
}); 

ご覧のとおり、各スパンの不透明度をランダムに設定しています。その例では意図したとおりに動作しますが、もちろんランダムなプロパティをハードコードしたくないので、メソッドや計算されたプロパティを使用することをお勧めします。

そして、このようなスパンに追加する：これは私が私のコンポーネントに追加しようとしたものです

'<div class="textFx"><span v-bind:style="computedStyle" v-for="words in wordArray">{{words}}</span></div>', 

これは技術的には動作しません、それはランダムな不透明度値を提供し、それが適用されますALLスパンと同じランダム値で、ハードコードされた例とは異なります。

メソッドや計算されたプロパティがレンダリングされる各スパンのMath.random値を再計算できるようにするにはどうすればよいですか？

Answer 1

計算されたプロパティは、依存するデータプロパティのいずれかが変更された場合にのみその値を更新します。 computedStyleには従属プロパティがないので、それを計算する関数は1回だけ実行されます。その計算値は、その後の参照で変更されません。

ユアーズあなたの代わりに計算されたプロパティを使用してのスタイルオブジェクトを返すメソッドを定義したい場合です：

methods: { 
    getComputedStyle() { 
    return { opacity: Math.random().toFixed(2) }; 
    } 
} 

次に、そのようなスタイルに結合したときにメソッドを呼び出します。

<span v-bind:style="getComputedStyle()"></span> 

Here's a working codepen.