时间戳

首页 > 解决方案 > Vue.js 动态输入值绑定

vue.js - Vue.js 动态输入值绑定

问题描述

我们正在尝试从产品标题自动生成产品标签。即使用户选择不编辑，这些 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();
}

谢谢！

标签： vue.jsvuetify.js

解决方案

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

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

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

推荐阅读