所选选项的条件不起作用

Question

我正在使用

PrimeVue

数据表来显示我的产品，在更新产品的情况下，我想在模式输入中显示要更新的产品的值，包括

size

以及该产品是否包含在最佳产品中销售列表或否，所选

size

的条件工作正常，但它不适用于

bestSelling

，我确保

form.bestSelling

是1或0，但

:selected

绑定条件不起作用:

Index.vue

<Column field="size" header="Size"></Column>

<Column header="Best Selling">
   <template #body="slotProps">
       <p>
         {{ slotProps.data.bestSelling == 1 ? "Yes": "No" }}
       </p>
   </template>
</Column>

UpdateProduct.vue

import { useForm } from "@inertiajs/vue3";
const props = defineProps(["product"]);

const form = useForm("UpdateProduct", {
    name: props.product.name,
    nameAr: props.product.nameAr,
    description: props.product.description,
    descriptionAr: props.product.descriptionAr,
    size: props.product.size,
    quantityPerPacket: props.product.quantityPerPacket,
    bestSelling: props.product.bestSelling,
});

onMounted(() => {
    form.reset();
});

<div class="field">
   <select v-model="form.size">
      <option :selected="form.size == 'Large'">Large</option> // works
      <option :selected="form.size == 'Medium'">Medium</option> // works
      <option :selected="form.size == 'Small'">Small</option> // works
   </select>
</div>

<div class="field">
  <select v-model="form.bestSelling">
    <option :selected="form.bestSelling == 1">Yes</option> // doesn't work
    <option :selected="form.bestSelling == 0">No</option> // doesn't work
  </select>
</div>

我什至这样做了，选项显示

true

，如果是的话：

<option>{{ form.bestSelling == 1 }}</option> // returns true

即使我这样做，仍然不会被选中：

<option :selected="form.bestSelling == 1"> // won't be selected even if the condition is definitely true
 {{ form.bestSelling == 1 }} 
</option>

Answer 1

不要设置

selected

的

<option>

属性，而是设置它的

value

属性，然后让 Vue 通过

v-model

上的

<select>

来计算出来：

<div class="field">
  <select v-model="form.bestSelling">
    <option :value="1">Yes</option>
    <option :value="0">No</option>
  </select>
</div>