Получить переменные данных в свойствах параметров в Vue.js / Vue-select

Question

Мне нужна помощь с VUE.

1. Можно ли вызывать переменные данных в свойствах параметров? Например, в свойстве "цена" я хотел бы назвать переменную данных "налог".
2. И как вернуть единственное свойство options в функции, в моем случае функция называется "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>

Answer 1

Пожалуйста, смотрите ответы ниже

1. Можно ли вызывать переменные данных в свойствах параметров? Например, в свойстве "цена" я хотел бы назвать переменную данных "налог".

Вы не можете, но вы можете сделать следующее. Сделайте ваши данные 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: '',
      }]
    }
  }
})

2. И как вернуть единственное свойство options в функции, в моем случае функция называется "final", я попытался вернуть this.selected.test, но он не работает

Изначально ваш this.selected нулевой. Вот почему ваш код вызывает исключение, когда вы сделали this.selected.test, Попробуйте следовать

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

Answer 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>