vue3 无法遍历作为 prop 传递的对象数组

Question

在 vue3 中，我将一组选项从父组件传递到子组件，以便将其用作 select 的选项。目前，我无法使用它来初始化我的 select。

这里是子组件SmartNumberInput

   <template>
  <div>
    <div>Selected: {{ selected }} Initial:{{ initial }}</div>
    {{ options }}

    <div v-for="option in options" :key="option.value">
      {{ option.text }}
    </div>

    <input type="number" v-model="input_value" />


    <select v-model="selected">
      <option
        v-for="option in options"
        :value="option.value"
        :key="option.value"
      >
        {{ option.text }}
      </option>
</select>
    
  </div>
</template>
<script>
export default {
  props: ["initial", "options"],
  data() {
    return {
      selected: "",
      input_value: "",
    };
  },
};
</script>

这里是父组件

<template>
  <div>
    <h1>Hi! I am the root component</h1>
    <div class="smart-number-input">
      <smart-number-input
        initial="B"
        options="[{text:'Liters',value:'A'},{text:'Gallons',value:'B'},{text:'Pints',value:'C'}]"
      />
    </div>
  </div>
</template>
  
<script>
import SmartNumberInput from "./SmartNumberInput.vue";
export default {
  data() {
    return {
      initial: "salut",
    };
  },
  components: { SmartNumberInput },
};
</script>
<style>
.smart-number-input {
  width: 100%;
  background:#EEE;
}
</style>

在我得到的结果中（见图）select 中没有可见的选项，但是当单击小箭头时它会扩展为一个长长的空列表。子项中的 {{options}} 语句显示我作为道具传递的内容，即对象数组，但在我使用 v-for 循环的 div 中没有显示任何内容。当我将选项声明为子项中的数据时，两个循环（div 和 select）工作正常。

有人可以解释一下我传递或使用选项数组的方式有什么问题吗？

Answer 1

将options更改为:options（添加冒号）

.

如果您不输入冒号，它将将该值视为字符串...

vue3 无法遍历作为 prop 传递的对象数组

vue3 Cannot loop over an array of object passed as prop

vue-props

vuejs3