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));
}

数组只是不响应'='操作。