Question

我想在组件中渲染一个属性。

我在模板中有： <v-flex v-for="c in components"> <component :is="c.component" v-bind="c.prop"></component> </v-flex>

在脚本中：

...
mounted(){
        this.components.push({, 
          component: "input", 
          prop: {type:"checkbox", v-text:"My CheckBox"}
        })

它可以使用任何组件或属性工作。但是问题是当我尝试呈现 v-text 时。我认为是因为-

如何成功渲染v文本？

Answer 1

首先，未加引号的属性名称只能包含字母数字_和$。因此，要包含-，您需要引用它：

{ "v-text": "My Checkbox" }

您可以选择双引号或单引号。

没有引号，我什至不希望代码进行解析/翻译，因此，我希望会有清晰的错误消息。

下一个问题是v-bind不能使用v-text。它们是两个单独的指令，因此您在这里有效执行的操作是：

v-bind:v-text="'My Checkbox'"

那将被解释为DOM属性，没有特殊含义。如果您检查DOM，则会看到v-text属性，如果将其解释为指令，该属性将不存在。

相反，您需要在数据中添加一个单独的条目：

this.components.push({, 
  component: "input", 
  prop: {type:"checkbox"},
  text: "My CheckBox"
})

，然后在您的模板中：

<component
  :is="c.component"
  v-bind="c.prop"
  v-text="c.text"
></component>

或：

<component
  :is="c.component"
  v-bind="c.prop"
>
  {{ c.text }}
</component>

所有这些都说明，input元素无论如何都不能包含任何内容，因此在这种情况下尝试使用v-text将毫无意义。

Answer 2

我认为“ v-”的起始名称是保留的，您可能必须将v-text更改为text，然后在组件内部进行处理。

mounted(){
        this.components.push({, 
          component: "input", 
          prop: {type:"checkbox", text:"My CheckBox"}
        })