AlpineJs 从 select[option] 中提取值

Question

尝试使用 x-model.number 从选择选项中获取值以计算值。使用以下输入文本有效。如何在选择选项上翻译它？

<div x-data="{first: 0, second: 0}">
  <input type="text" x-model.number="first"> + <input type="text" x-model.number="second"> =
        <output x-text="first + second"></output>
 </div>


<div x-data="{chromeNow: 0, chromeNatural: 0 }">
       <select>
           <option value="7499.00" x.model.number="chromeNow">1</option>
           <option value="6900.00" x.model.number="chromeNow">2</option>
      </select>
      <select >
         <option value="6900.00" x.model.number="chromeNatural">1</option>
         <option value="1200.00"  x.model.number="chromeNatural">2</option>
      </select>

   <h3 x-text="chromeNow + chromeNatural"> </h3>
</div>

Answer 1

我相信它应该通过将x-model 放在选择而不是选项上来工作。为了使所选状态正确，将value 绑定到数字表示可能也是一个好主意。

<div x-data="{chromeNow: 0, chromeNatural: 0 }">
       <select x-model.number="chromeNow" >
           <option :value="7499.00">1</option>
           <option :value="6900.00">2</option>
      </select>
      <select x-model.number="chromeNatural">
         <option :value="6900.00">1</option>
         <option :value="1200.00">2</option>
      </select>

   <h3 x-text="chromeNow + chromeNatural"> </h3>
</div>