Vue.js 动态输入值绑定

Question

我们正在尝试根据产品标题自动生成产品标签。即使用户选择不编辑，这些 slug 也必须是可编辑的，并且也需要发布到数据库中。

例如，标题 "Red Shirt" 生成 slug "redshirt"。然后，用户可以将 slug 保持原样或将其编辑为 "redcottonshirt"。

这个:placeholder="slug" 工作正常。但是，:value="slug" 返回undefined。

有没有办法让值等于 slug，然后将该值绑定到 v-model 指令？

这是我们的代码：

    <div>Product Name:</div>
            <v-text-field
              label="Example: Tri-Blend Tank Top"
              v-model.lazy="product.title"
              bottom
              required
              solo
              class="mb-2"
             >
            </v-text-field>
            <div v-if="product.title">
            <div>Product Slug (required):</div>
            <v-text-field
              class="mb-2"
              :value="slug"
              :placeholder="slug"
              v-model.lazy="product.slug"
              solo
              required
              >
            </v-text-field>
            </div>

和计算属性：

slug () {
  return this.product.title.replace(/\s+/g, '').toLowerCase();
}

谢谢！

Answer 1

将您的 slug 转换为数据属性：

data() {
  return {
    slug: product.title.replace(/\s+/g, '').toLowerCase();
  };
}

这样做您无需更改标记中的任何内容。