AlpineJs 从 select[option] 中提取值

Question

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

<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 放在 select 而不是选项上应该可以。为了使 selected 状态正确，将 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>

AlpineJs 从 select[option] 中提取值

AlpineJs Extract value from select[option]

javascript

alpine.js