1

我需要一些关于 vue 的帮助。

  1. 是否可以在选项属性中调用数据变量？例如，在“价格”属性中，我想将数据变量称为“税”。
  2. 以及如何在函数中返回单个选项属性，在我的情况下，函数称为“final”，我尝试返回 this.selected.test，但它不起作用

这是代码：

Vue.component('v-select', VueSelect.VueSelect)
new Vue({
  el: '#app',
  data: {
    selected: null,
    tax: 0.07,
    mrg: 0.11,
    ex_mrg: 0.16,
    qnt: '',
    options: [{
      label: 'Item 1',
      id: 1,
      price: '* Price: ' + '$' + 0.26 + ' per one printed item',
      test: 5,
      env: 0.026,
      ltrhd: '',
    }, {
      test: 6,
      label: 'Item 2',
      id: 2,
      price: '* Price: ' + '$' + 7.35 + ' per one printed item',
      shrt: 7.351
    }, {
      test: 7 * 7,
      label: 'Item 3',
      id: 3,
      price: '* Price: ' + '$' + 0.96 + ' per one printed item',
      frsb: 0.969269,
      yoyo: 0.3658
    }, ]
  },
  computed: {
    selectedId() {
      return this.selected ? this.selected.id : null;
    },
    priceId() {
      return this.selected ? this.selected.price : null;
    },
    result: function() {
      return this.tax * this.mrg * this.qnt;
    },
    final: function() {
      return this.selected;
    }
  },
})
<script src="https://unpkg.com/vue@2.5.11"></script>
<script src="https://unpkg.com/vue-select@2.3.1"></script>
<div id="app">
  <h1>Please, select item</h1>
  <v-select v-model="selected" :options="options"></v-select><br>
  <p>Quantity needed:</p>
  <input type="number" name="trade-in" v-model.number="qnt" />
  <p>{{ priceId }}</p>
  <h1>selectedId: {{ selectedId }}</h1>
  <p>{{ qnt }}</p>
  <p>Final price: ${{ result }}</p>
  <p>Final price: {{ final }}</p>
</div>

4

2 回答 2

2

首先。做data:{}一个函数。即应该是data () {}

其次，你没有得到的原因this.selected.test是，最初你this.selected是空的。因此，一旦页面加载，您的计算属性就会尝试test从该空数据中获取。

第三。如果您想在您options的 .

这是一个工作示例。

Vue.component('v-select', VueSelect.VueSelect);

new Vue({
  el: '#app',
  data () {
    return {
      selected: null,
      tax: 0.07,
      mrg: 0.11,
      ex_mrg: 0.16,
      qnt: '',
    }
  },
computed: {
  options () {
    return   [{
      label: 'Item 1',
      id: 1,
      price: this.tax + '$' + 0.26 + ' per one printed item',
      test: 5,
      env: 0.026,
      ltrhd: '',
    }, {
      test: 6,
      label: 'Item 2',
      id: 2,
      price:  this.tax  + '$' + 7.35 + ' per one printed item',
      shrt: 7.351
    }, {
      test: 7*7,
      label: 'Item 3',
      id: 3,
      price: this.tax  + '$' + 0.96 + ' per one printed item',
      frsb : 0.969269,
      yoyo : 0.3658
    }]
  },
      selectedId() {
    return this.selected ? this.selected.id : null;
    },
    priceId() {
    return this.selected ? this.selected.price : null;
      
    },
    result: function(){
    return this.tax * this.mrg * this.qnt;
    },
  final () {
    return this.selected ? this.selected.test : false;
  }
}

})
<script src="https://unpkg.com/vue-select@2.3.1/dist/vue-select.js"></script>
<script src="https://unpkg.com/vue@2.5.11/dist/vue.min.js"></script>

<div id='app'>
  <h1>Please, select item</h1>
  <v-select v-model="selected" :options="options"></v-select><br>
  <p>Quantity needed:</p>
  <input type="number" name="trade-in" v-model.number="qnt" />
  <p>{{ priceId }}</p>
  <h1>selectedId: {{ selectedId }}</h1>
  <p>{{ qnt }}</p>
  <p>Final price: ${{ result }}</p>
  <p>Final price: {{ final }}</p>
</div>

于 2017-12-15T17:13:30.200 回答
1

请看下面的答案

  1. 是否可以在选项属性中调用数据变量？例如，在“价格”属性中，我想将数据变量称为“税”。

你不能，但你可以做以下事情。使您的数据 afunction并申报税款variable，variable您可以在多个地方使用。

new Vue({
  el: '#app',
  data: function() { 
    var tax = 0.07;
    return {
      tax: tax,,
      options: [{
        label: 'Item 1',
        id: 1,
        price: '* Price: ' + '$' + (0.26 + tax) + ' per one printed item',
        test: 5,
        env: 0.026,
        ltrhd: '',
      }]
    }
  }
})
  1. 以及如何在函数中返回单个选项属性，在我的情况下，函数称为“final”，我尝试返回 this.selected.test，但它不起作用

最初你this.selected是空的。这就是为什么你的代码在你做的时候会抛出异常this.selected.test。尝试关注

final: function(){
      return this.selected && this.selected.test;
}
于 2017-12-15T17:10:51.243 回答