Vue.js形成不反應

Question

所以我有簡單的計算器。 用戶選擇字體，然后選擇大小並輸入單詞，計算價格。

問題是這種形式的某些元素沒有反應，對於Vue.js的新手術語我很抱歉。

這是我的HTML

<div id="app">

    <ul>
        <li v-for="font in fontTypes" v-on:click="fontType(font)">{{ font.name }}</li>
    </ul>

    <ul>
        <li v-for="currentFont in currentFonts" v-on:click="fontSize(currentFont)">{{ currentFont.size }}</li>
    </ul>

    <input type="text" v-model="result">

    <div id="result">
        <p>{{ finalPrice }}</p>
    </div>

</div>

這是JS：

var formatter = new Intl.NumberFormat('lt-LT', {
        style: 'currency',
        currency: 'EUR',
        minimumFractionDigits: 2
    });

    var vm = new Vue({

        el: '#app',
        data: {
            result: '',
            currentFonts: '',
            selectedFont: '',
            selectedSize: '',
            selectedFontSizePrice: '',
            fontTypes: [
                { name: 'Font 1', params: [ {size: '2.5', price: '3.10'}, {size: '3', price: '5'} ] },
                { name: 'Font 2', params: [ {size: '3', price: '4'}, {size: '4', price: '7'} ] },
                { name: 'Font 3', params: [ {size: '7', price: '45'}, {size: '8', price: '50'} ] }
            ]
        },
        computed: {
            finalPrice: function() {
                var letterCount = this.result.replace(/\s/g, "").length;
                var letterPrice = this.selectedFontSizePrice;
                var price = letterCount * letterPrice;
                return formatter.format(price);
            }
        },
        methods: {
            fontType: function(selectedFont) {
                this.selectedFont = selectedFont.name;
                this.currentFonts = selectedFont.params;
            },
            fontSize: function(selectedSize) {
                this.selectedSize = selectedSize.size;
                this.selectedFontSizePrice = selectedSize.price;
            }
        }

    });

selectedFontSizePrice不是被動的。 當我更改字體（selectedFont）時，selectedFontSizePrice保持不變。 如果父選擇器發生更改，我需要進行某種清除，或者甚至更好地從列表中選擇第一個值並重新計算finalPrice。 或者也許我在做一些完全錯誤的事情？

Answer 1

不確定我是否理解了這個問題，但是如果你想在選擇一個fontType時更新'selectedFontSizePrice'值，我認為你應該調用函數fontSize （據我所知，它是修改'selectedFontSizePrice'值的那個） ）從函數fontType里面

        methods: {
            fontType: function(selectedFont) {
                this.selectedFont = selectedFont.name;
                this.currentFonts = selectedFont.params;
                this.fontSize(selectedFont.params[0]);  //select first value
            },
            fontSize: function(selectedSize) {
                this.selectedSize = selectedSize.size;
                this.selectedFontSizePrice = selectedSize.price;
            }
        }

Answer 2

Vue允許您做的一件事就是輕松編寫自己的組件。 看起來有人通常會使用select元素，您選擇使用無序列表元素。 你可以隨便寫，將表現得像個選擇通過定義一個小Vue的組件自己的無序列表元素。

Vue.component('list-select', {
  props: ["items"],
  template:"<ul class='list-select'><li :class='selectClass(item)' v-for='item in items' :value='item.value' @click='onClick(item)'>{{item.text}}</li>", 
  data(){
    return {
      value: null,
      selectedItem: null
    }
  },
  methods:{
    selectClass(item){
      return {
        selected: item == this.selectedItem
      }
    },
    onClick(item){
      this.selectedItem = item;
      this.$emit('input', item.value);
    }
  }
});

然后，您可以在Vue中使用此組件。

<div id="app">
    <list-select :items="types" v-model="selectedFont" @input="selectedSize = null"></list-select>
    <list-select v-if="selectedFont" :items="sizes" v-model="selectedPrice"></list-select>

    <input type="text" v-model="result">

    <div id="result">
        <p>{{ finalPrice }}</p>
    </div>
</div>

這是Vue的定義。

var vm = new Vue({
  el: '#app',
  data: {
    result: '',
    selectedFont: null,
    selectedPrice: null,
    fontTypes: [
      { name: 'Font 1', params: [ {size: '2.5', price: '3.10'}, {size: '3', price: '5'} ] },
      { name: 'Font 2', params: [ {size: '3', price: '4'}, {size: '4', price: '7'} ] },
      { name: 'Font 3', params: [ {size: '7', price: '45'}, {size: '8', price: '50'} ] }
    ]
  },
  computed: {
    types(){
      return this.fontTypes.map((type) => {
        return {text: type.name, value: type.params};
      });
    },
    sizes(){
      return this.selectedFont.map((size) => {
        return {text: size.size, value: size.price};
      });
    },
    finalPrice: function() {
      if (this.result.length <= 0)
        return formatter.format(0);

      var letterCount = this.result.replace(/\s/g, "").length;
      return formatter.format(letterCount * this.selectedPrice);
    }
  }
});

這種方法使一切都完全被動，並且習慣性地使用Vue。 這是一個有效的例子 。

Answer 3

改變這個方法：

fontType: function(selectedFont) {
    this.selectedFont = selectedFont.name;
    this.currentFonts = selectedFont.params;
}

至：

fontType: function(selectedFont) {
    this.selectedFont = selectedFont.name;
    this.currentFonts = [];
    selectedFont.params.forEach(function(p){
        this.currentFonts.push(p);
    }.bind(this));
}

數組只是不響應'='操作。