在 Vue.js / Vue-select 的选项属性中检索数据变量

Question

我需要一些 vue 方面的帮助。

是否可以在选项属性中调用数据变量？例如在 "price" 属性中我想调用数据变量 "tax"。
以及如何在函数中 return 单个选项属性，在我的例子中函数被称为 "final"，我试过 return 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>

Answer 1

请看下面的答案

Is it possible to call data variables in options properties? For example in "price" property I would like to call data variable "tax".

你不能，但你可以做以下事情。使您的数据成为 function 并申报税 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: '',
      }]
    }
  }
})

And how to return a single options property in a function, in my case function is called "final", i tried return this.selected.test, but it is not working

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

final: function(){
      return this.selected && this.selected.test;
}

Answer 2

首先。使 data:{} 成为一个函数。即它应该是 data () {}

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

第三。如果你想在你的 options 中使用税收属性，你应该考虑制作一个属性选项，returns 选项加上税收全部计算。

这是一个工作示例。

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>

在 Vue.js / Vue-select 的选项属性中检索数据变量

Retrieve data variables in options properties in Vue.js / Vue-select

javascript

vue.js

vuejs2

vue-select