标签: v-model

我不明白组件上使用的 v-model 和 .sync 之间的区别。

<my-component v-model="myVar">

V-model 是将变量 (myVar) 绑定到组件属性 'value' 并侦听从组件发出的 'input' 事件以更新变量 'myVar' 的简写。

<my-component v-bind:prop1.sync="myVar">

.sync 是将变量 (myVar) 绑定到组件属性（在本例中为“prop1”）并侦听从组件发出的“update:prop1”事件以更新变量“myVar”的简写。

我知道默认情况下 v-model 仅适用于 'value' 属性和 'input' 事件，但即便如此，也可以使用组件中的 'model' 选项进行自定义。

如果有人可以向我解释差异或何时使用什么，那就太好了。

这是我以三种不同方式使用相同组件的示例：1) 手动绑定 + 事件监听 2) .sync 3) v-model

我想v-model在组件上添加 a 但收到此警告：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

这是我的代码：

[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.

// Parent.vue
<template>
  <h2>V-Model Parent</h2>
  <Child v-model="name" label="Name" />
  <p>{{ name }}</p>
</template>

<script setup>
import { ref } from 'vue'
import Child from './Child.vue'

const name = ref('')
</script>

我试图重现本教程，但我被困住了，不知道我错过了什么。

{{ …

我试图将选择输入中的任何选项设置为对象中的值。我正在尝试使用 v-model 来达到此目的，但我不太确定如何使用。以下是我迄今为止尝试做的事情。

<div class="select-wrapper">
  <select required name="category" id="category" @change="(e) => $emit('input', e.target.value)">
      <option value="" selected="selected">Category*</option>
      <option value="attendee">Attendee</option>
      <option value="distributor">Distributor</option>
      <option value="sponsor">Sponsor</option>
      <option value="media/analyst">Media/Analyst</option>
      <option value="university">University</option>
      <option value="other">Other</option>
  </select>
 </div>

如果我打开https://vuejs.org/v2/guide/forms.html#Text并编辑文本 - 对移动Chrome中的文本输入没有影响.@keyup @input @keypress - 当我打字时,v-model不会改变

<input v-model="message" @keyup="log" placeholder="Edit">
<p>Edited: {{ message }}</p>

我该如何解决？我需要在输入时获得输入值(@keyup @input)

我正在寻找一种在同一对象上同时使用v-model和 的方法。:value

我收到这个错误：

:value="user.firstName"v-model与同一元素冲突，因为后者已经在内部扩展为值绑定。

目的是将从（来自一个商店）获取的值设置为默认值mapGetters，并在用户提交修改时设置正确的值。（在onSubmit）

<div class="form-group m-form__group row">
    <label for="example-text-input" class="col-2 col-form-label">
        {{ $t("firstname") }}
    </label>
    <div class="col-7">
        <input class="form-control m-input" type="text" v-model="firstname" :value="user.firstName">
    </div>
</div>


<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    data () {
        return {
            lang: "",
            firstname: ""
        }
    },
    computed: mapGetters([
        'user'
    ]),
    methods: {
        ...mapActions([
            'updateUserProfile'
        ]),
        onChangeLanguage () {
            this.$i18n.locale = lang;
        },
        // Function called when user click …

所以我有一个正在渲染表单的组件，它还使用从 ajax 请求接收到的数据预先填充字段。

我的问题是，我不仅希望能够编辑字段，还希望同时添加要提交的新字段，因此我尝试将预填充的数据和新数据初始化到要提交的同一个对象中与我的ajax请求。根据我当前的设置，表单数据在呈现表单之前并没有始终如一地填充字段。

这是表单模板

<form @submit.prevent="editThisWorkflow" class="d-flex-column justify-content-center" >

 <div>
   <input type="text" v-model="workflowData.workflow">
    </div>
    <div >
    <div v-for="object in workflowData.statuses" :key="object.id">
    <input type="text" v-model="object.status">
    </div>
    <div v-for="(status, index) in workflowData.newStatuses" :key="index">
    <input type="text" placeholder="Add Status" v-model="status.value">
    <button type="button" @click="deleteField(index)">X</button>
    </div>
    <button type="button" @click="addField">
      New Status Field
    </button>
    </div>
    <div>
    <div>
    <button type="submit">Save</button>
    <router-link  :to="{ path: '/administrator/workflows'}" >Cancel</router-link>
  </div>
 </div>

</form>

这是脚本

data() {
        return {
            workflowData: {
                id: this.$store.state.workflow.id,
                workflow: this.$store.state.workflow.workflow,
                statuses: this.$store.state.workflow.statuses,
                newStatuses: []
            },
            workflowLoaded: false …

我正在使用这个Weather API构建一个天气应用程序。我正在尝试添加一个<input>字段值，当它更改城市名称时，然后更新其他值预测。

我创建了<input>更新城市值的字段，它应该相应地更新天气预报。我知道它v-model正在工作，但是它不会改变数据结果。仅当我在数据中硬编码不同的城市时，Vue-instance才会更新更改。

<template>
  <div class="home">
    <h1>{{ msg }}</h1>
    <p>A weather app built Vuejs & Open Weather App. Made by Manuel Abascal</p>
    <input type="text" v-model.lazy="currentWeather.name">
    <div class="forecast">
     <div v-if="this.currentWeather">
      <!-- Forecast stat values -->
      <h2>Right now:</h2>
      <div><strong>City:</strong> {{ currentCity }}</div>
      <div><strong>Longitude: </strong> {{ currentWeather.coord.lon }}</div>
      <div><strong>Latitude: </strong> {{ currentWeather.coord.lat }}</div>
      <div><strong>Weather condition </strong> {{ currentWeather.weather[0].description }}</div>
      <div><strong>Temperature Mid: </strong> {{  currentWeather.main.temp }} Farenheit</div>
      <div><strong>Temperature Max: </strong> {{  currentWeather.main.temp_max}} Farenheit</div>
      <div><strong>Temperature …

链接到我的项目： https://codesandbox.io/s/v-model-3j96f

截至我上面的链接，“组件”文件夹内有一个名为 HelloWorld.vue 的文件： inputvalue.bbbb是在数据选项中定义的反应数据，但是

奇怪的是，inputvalue.cccc在使用 v-model 输入后会变得有反应，但inputvalue.cccc不会与@input.

在这个问题（Vue.js绑定对象属性）中，第一种情况应该是不可能的。

我尝试editor.content直接绑定this.newTutorial.content 但还没有成功..

在控制台中：

这是我的代码：

<style scoped>
img.preview {
  width:200px;
}
.v-btn {
    height: 50px !important;
    min-width: 50px !important;
}

</style>

<template>

<div id="app">
    <v-dialog v-model="dialog" width="500">
        <template  v-slot:activator="{ on, attrs }">
            <v-btn style="z-index:9;" color="blue lighten-1" dark rounded v-bind="attrs" v-on="on" fixed left>
                <v-tooltip right >
                    <template  v-slot:activator="{ on, attrs }">
                        <v-icon fab dark v-bind="attrs" v-on="on">
                            mdi-plus
                        </v-icon>
                    </template>
                    <img class="monk-ico" src="https://celfonica.s3-us-west-1.amazonaws.com/logos/monk-circle+50px.png">
                    <span style="display:inline;">
                      Add Tutorial
                    </span>
                </v-tooltip>
            </v-btn>
        </template>
        <div class="left">
            <v-btn color="primary" @click="dialog = false" width="10px">
                <v-icon> …

所以我对 Typescript 和 VueJS 及其所有新功能都很陌生。
一切都按预期工作，但我无法摆脱打字稿错误并同时使用 v-model。
我正在开发一个网络视图，供成员检查和更改其属性。我从 API 获取会员数据并将其存储在 PiniaStore 中。这意味着我有几个需要成员的数字和字符串的输入字段。AFAIK v-model 是输入字段的最佳选择。

 Type 'string | number | null | undefined' is not assignable to type 'Nullable<string>'.
  Type 'number' is not assignable to type 'Nullable<string>'.

所有关于此错误的 stackoverflow 问题的建议解决方案（例如此一个或此一个）都不适合我的问题 AFAIK。我发现了一个不好的解决方法，我不喜欢在模板块中使用更改事件而不是 v-model，并且在我的脚本中出现相同的错误，但通过忽略它//@ts-ignore。

首先，我真正要求的是如何注释掉 VueJs 模板块中的打字稿错误，已经在这里询问过。
其次，如何解决这个问题而不出现打字稿错误？

看看下面的代码，我遇到了这个错误v-model，不知道如何修复它：

<script setup lang="ts">
import { useMembershipStore } from "@/stores/membership";

const membershipStore = useMembershipStore();
membershipStore.getMembership();
const { membership } = storeToRefs(membershipStore);

function save() {
  if …