使用Vue未定义但在浏览器中可访问的标记名称属性

Question

目前，我有一个选择器，在对{{ lens.price }使用Vue时返回未定义的选项。但是当我在浏览器控制台中使用a = lens[1].getAttribute('price')时，我得到了正确的"0"返回值。

为什么Vue使返回的数据没有定义？对于从for循环返回的所有选项，该属性在浏览器中工作良好。

是否需要将这两个属性传递给单个值标记名？

HTML/液体：

    <div>
      <label for="lens"></label>
      <select id="lens" name="line_items[lens]" @change="handleChange('lens', $event); secondChange($event);"
        class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-none focus:border-black font-bold">
        <option>Choose a lens</option>
        {% for lens in collections.lenses.products %}
        <option price="{{ lens.price }}" value="{{ lens.variants[0].id }}">{{ lens.title }} |
          {{ lens.price | plus: product.price | money_without_trailing_zeros}}</option>
        {% endfor %}
      </select>
    </div>

VUE的细分：(未完成代码)

data: function () {
    return {
        buttonText: false,
        slideOut: false,
        disableAddToCart: true,
        chosenLens: '',
        chosenFilter: '',
        lensPrice: ''
    }

handleChange(type, e) {
        if (type === 'lens') {
            if (e.target.value) {
                this.chosenLens = e.target.value;
            }
            else {
                this.chosenLens = ''
            }
        }
        if (type === 'filter') {
            this.chosenFilter = e.target.value || ''
        }
        this.disableAddToCart = !(this.chosenLens && this.chosenFilter);
    },
    secondChange(e) {
        this.lensPrice = `${e.target.price}`;
    },

我只试过Javascript：(未定义)

<div>
    <label for="lens"></label>
    <select id="lens" onchange="myFunction()" name="line_items[lens]" @change="handleChange('lens', $event);"
      class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-none focus:border-black font-bold">
    <option>Choose a lens</option>
    {% for lens in collections.lenses.products %}
    <option price="{{ lens.price }}" value="{{ lens.variants[0].id }}">{{ lens.title }} |
      {{ lens.price | plus: product.price | money_without_trailing_zeros}}</option>
    {% endfor %}
  </select>
</div >
    <h1 id="demo"></h1>
    <script>
        function myFunction() {
  var x = document.getElementById("lens").price;
        document.getElementById("demo").innerHTML = "You selected: " + x;
      }
</script>

只有属性名'value'：(工作)

    <div>
  <label for="lens"></label>
  <select id="lens" onchange="xIs()" name="line_items[lens]" @change="handleChange('lens', $event);"
    class="mt-3 option-selector text-sm lg:text-base uppercase block appearance-none w-full bg-white text-gray-900 py-3 px-4 pr-8 rounded-sm leading-tight focus:outline-none focus:border-black font-bold">
    <option>Choose a lens</option>
    {% for lens in collections.lenses.products %}
    <option value="{{ lens.price }}">{{ lens.title }} |
      {{ lens.price | plus: product.price | money_without_trailing_zeros}}</option>
    {% endfor %}
  </select>
</div>
<h1 id="demo"></h1>
<script>
 const xIs = () => {
  var x = document.getElementById("lens").value;
   document.getElementById("demo").innerHTML = `x is: ${x}`;
}

</script>

Answer 1

最后，我成功地使用了与下面相同的技术。

<select id="app"  @change="deleteItem()">
      <option type="button" data-price="$149">
          $149
      </option>
      <option type="button" data-price="$409">
           $409
      </option>
    </select>

new Vue({
  el: '#app',
  methods:{
    deleteItem: function(){
        var carList = document.getElementById("app");
        var selCar = carList.options[carList.selectedIndex].dataset.price;
        alert(selCar)
    }
  },
})

输出是数据属性的警报，在更改时为149美元，在更改时为409美元。@click也有效。

Answer 2

让我们从这里开始：

e.target.value

e是浏览器事件对象。

e.target将是<select>元素。

<select>元素具有一个名为value的内置属性，该属性反映当前选定的值。此值来自当前选定的value属性的<option>。

所以所发生的是：

用户单击<option>.

• The浏览器，将<select>的value属性设置为等于所选<option>.

• The浏览器的value属性，将触发<select>.

的change事件

value属性在HTML中具有特殊的意义。<option>的其他属性，如price，则不会。

这里有一个完全不使用Vue的例子，它显示了同样的行为：

​

document.getElementById('lens').addEventListener('change', function (ev) {
  const target = ev.target
  console.log(target.tagName, target.value, target.price)
})

<select id="lens">
  <option value="A" price="1">First</option>
  <option value="B" price="2">Second</option>
</select>

​

对于将非字符串值绑定到<option>元素以便与v-model一起使用，Vue确实有一些特殊的处理方法，但是您所看到的问题并不是Vue特有的。

Answer 3

我知道这可能不是一个合适的修补程序，但我现在只能使用split()进行黑客攻击:问题是Vue似乎希望数据来自值和它没有使用的任何其他属性名称。

<option value="{{ filter.variants[0].id }}-{{ filter.price }}"><span>{{ filter.title }} +
  </span><span>{{ filter.price | money_without_trailing_zeros }}</span></option>

priceMethod(type, e) {
        if(type === 'lens')
        if (e.target.value) {
            let a = e.target.value
            a = a.split("-")[1]
            a = a.replace('00', '')
            console.log(a)
            a = parseInt(a)
            this.lensPrice = a;
        } 
        if (type === 'filter') {
            let b = e.target.value
                b = b.split("-")[1]
                b = b.replace('00', '')
                b = parseInt(b)
                console.log(b)
            this.filterPrice = b || ''
        }