javascript - 标签名称属性未使用 Vue 定义，但可在浏览器中访问

Question

目前，我有一个选择器，当使用 Vue 作为 {{lens.price}} 时返回未定义。但是当我在浏览器控制台中使用 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>

仅属性名称“值”:(工作)

    <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

让我们从这里开始:

e.target.value

e是浏览器事件对象。

e.target将是<select>元素。

一个<select>元素有一个名为 value 的内置属性反射(reflect)当前选择的值。该值取自value当前所选的属性<option> .

所以发生的事情是:

1. 用户点击 <option> .
2. 浏览器设置value <select> 的属性等于 value所选的属性<option> .
3. 浏览器触发 change事件<select> .

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>

Vue 确实有一些特殊的处理来将非字符串值绑定(bind)到 <option>用于 v-model 的元素但您看到的问题并不是 Vue 特有的。