alpine.js选择/选项init值

Question

我有以下选择/选项输入

​

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ selected_id: 1, options: [{label: 'Foo', id: 0}, {label: 'Bar', id: 1}] }">
  <select x-model="selected_id">
    <template x-for="option in options">
      <option :value="option.id" x-text="option.label"></option>
    </template>
  </select>
  <div x-text="selected_id"></div>
</div>

​

最初选择的值是Foo，但i将select_id指定为1，它对应于Bar。

如何根据selected_id的值设置初始选定的值？

Answer 1

找到解决方案：https://github.com/alpinejs/alpine/issues/495

​

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ selected_id: 1, options: [{label: 'Foo', id: 0}, {label: 'Bar', id: 1}] }">
  <select x-model="selected_id">
    <template x-for="option in options">
      <option :value="option.id" x-text="option.label" :selected="option.id == selected_id"></option>
    </template>
  </select>
  <div x-text="selected_id"></div>
</div>

​