使用道具设置默认选择选项

Question

我在设置默认值时遇到了一些问题我尝试了以下方法：在选项中添加选择

<option value="1" selected>option A</option>

这没有用，下面是我的代码示例

<template>
  <div>
    <div>

      <div class="sm:col-span-3">
        <label
          for="outside_state"
          class="block text-sm font-medium text-gray-700 dark:text-white"
        >
          Option List
        </label>
        <div class="mt-1">
          <select
          v-model="selector.options"
            id="outside_state"
            name="outside_state"
            class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md dark:text-gray-900"
          >
            <option value="1">Value A</option>
            <option value="1">Value B</option>
          </select>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['selector'],
};
</script>

如何将 Value A 设置为默认值？
现在，当页面加载时，未选择任何内容。

Answer 1

您可以为道具设置默认值，如果道具未被传递，它将自动获取该值。

props:{
 selector: {
        type: Object,
        default: () => ({ options: 1 })
    }
}

您可以在这里阅读更多关于道具的信息：

https://vuejs.org/v2/guide/components-props.html#Prop-Types

使用道具设置默认选择选项

Set default selection option with props

vue.js

nuxt.js