将输入值传递给vue组件

Question

我是 vuejs 新手，正在为按钮、链接、输入等元素创建自定义组件。 这是我的输入组件-

<template>
  <div class="position-relative">
    <input
      :class="[{ 'pe-5': type === 'password' }, 'form-control p-2 rounded-3']"
      :type="inputType"
      :id="label ? slugify(label) : null"
      v-model="inputValue"
      v-bind="$attrs"
    />
    <CustomButton
      type="button"
      transparent
      class="position-absolute end-0 top-50 translate-y--50"
      v-if="type === 'password'"
      @click="togglePasswordVisibility"
    >
      <RemixIcon :icon="showPassword ? 'eye-off-line' : 'eye-line'" />
    </CustomButton>
  </div>
</template>

<script>
import RemixIcon from '../components/RemixIcon.vue';
import CustomButton from '../components/CustomButton.vue';

export default {
  components: {
    RemixIcon,
    CustomButton
  },
  props: {
    type: {
      type: String,
      default: 'text',
    },
    label: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      inputValue: '',
      showPassword: false,
    };
  },
  computed: {
    inputType() {
      return this.showPassword ? 'text' : this.type;
    },
  },
  methods: {
    togglePasswordVisibility() {
      this.showPassword = !this.showPassword;
    },
    slugify(str) {
      return str
        .toLowerCase()
        .trim()
        .replace(/[^\w\s-]/g, '')
        .replace(/[\s_-]+/g, '-')
        .replace(/^-+|-+$/g, '');
    },
  },
};
</script>

<style scoped></style>

当我在上面使用 v-model 时，它无法正常工作

<TextInput type="text" v-model="user_name" />

在这种情况下

user_name

有一个默认值，但它不会出现在输入中。

我想将 v-model 与此输入一起使用并使其可用。

我尝试在网上搜索并询问人工智能工具，但没有任何效果。

Answer 1

你可以看到docs，你必须更新自定义组件中的值