Question

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

例如，标题"Red Shirt"会生成子弹"redshirt"。然后，用户可以将子弹保持不变，也可以将其编辑为"redcottonshirt"。

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

有没有办法使值等于子段，然后再将该值绑定到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

将子弹转换为数据属性：

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

这样做，您不必更改标记中的任何内容。

Vue.js动态输入值绑定

1 个答案: