我想使用刀片语法将用户名显示为 Markdown 编辑器的默认 textarea 值。

<textarea v-model="message">
      {{ $detailsFromLaravelContoller }}
</textarea>
<div v-html="compiledMarkdown"></div>

但是我正在为 textarea 使用 v-model 组件，它需要像这样声明带有空值的消息

window.onload = function()
{ 
    var editor = new Vue({
    el: '#editor',
    data: {
        message: '',
        compiledMarkdown: marked('', { sanitize: true }), 
    },
    watch: {
        markdown: function () {
          this.compiledMarkdown = marked(this.message, { sanitize: true })
        }
      }, 
      methods: {

      }
  })  
}

这将使用laravel 变量的 value呈现屏幕。但是在页面加载后不久内容就消失了（因为我已经使用了 window.onload 我猜）。
另外我没有使用内联 VueJS。
PS：我是新来的都VueJS和Laravel和对降价的来源是在这里（的jsfiddle） …

所以我有一个正在渲染表单的组件，它还使用从 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 …

您好，我是Vue的初学者，确实有一个困扰我的问题。我想知道我们应该使用v-model指令来修改vuex存储吗？Vuex说我们应该只通过突变来修改vuex存储，但是v-model使一切变得更容易和更短。（我问是因为我找不到明确的答案）

我正在关注此文档：https : //vuejs.org/v2/guide/components.html 我创建了自定义 v-text-field 组件，如下所示：

<template>
<div>
<v-text-field
        :label="label"
        v-bind:value="value"
        v-on:input="$emit('input', $event.target.value)"></v-text-field>
</div>
</template>

<script>
export default {
    name: "txtbox",
    props: ['value', 'label'],
}
</script>

我几乎成功地在我的主要组件中实现了它：

<txtbox
label="Name"
v-model="eventName"
/>

我认为没有必要粘贴所有代码，但如果是，我会编辑帖子。这是它的工作原理：我有一个列表，当我单击列表元素时，文本字段会显示它的内容，这很好用。遗憾的是，当我编辑文本字段的内容时，v-model 值没有更新。我还可以补充一点，它适用于普通（如文档中）而不是 . 有什么我可以做的让它工作，还是应该使用简单的输入？谢谢

使用Vue3

父组件

<template>
   <div class="col-12 col-lg-12">
        <input-image v-model="imageFile"/>                                                            
   </div>
</template>

<script>
import InputImage from "@/Pages/components/InputImage";
export default{
   components : {
       InputImage,
   },
    
   data() {
       return {
          imageFile : null,
       }
   }
}
</script>

输入图像（子）组件

<template>
    <div class="form-group">
        <div
            class="base-image-input"
            :style="{ 'background-image': `url(${imageData})` }"
            @click="chooseImage"
        >
            <span v-if="!imageData" class="placeholder">Featured Image </span>
            <input
            class="file-input"
            ref="fileInput"
            type="file"
            @input="onSelectFile"
            />
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
      imageData: null,
    };
  },

  methods: {
    chooseImage() {
      this.$refs.fileInput.click();
    },

    onSelectFile() {
      const …

所以我对 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 …

我有一个第三方输入组件（一个vue文本字段）。

出于验证的原因，我更喜欢将此组件包装在我自己的包装中。

我的TextField.vue

<template>
    <v-text-field
            :label="label"
            v-model="text"
            @input="onInput"
            @blur="onBlur"
            :error-messages="this.getErrors(this.validation, this.errors)"
    ></v-text-field>
</template>

<script>
    import VTextField from "vuetify/es5/components/VTextField";
    import {vuelidateErrorsMixin} from '~/plugins/common.js';
    export default {
        name: "TextField",
        props: ['label', 'value', 'validation', 'errors'],
        mixins: [vuelidateErrorsMixin], //add vuelidate
        data: function() {
            return {
                'text': this.value
            }
        },
        components: {
            VTextField
        },
        methods : {
            onInput: function(value) {
                this.$emit('input', value);
                this.validation.$touch();
            },
            onBlur: function() {
                this.validation.$touch();
            }
        },
        watch: {
            value: {
                immediate: true,
                handler: function (newValue) {
                    this.text = newValue …

我的目标是创建一个“编辑帐户”表格，以便用户可以修改其帐户数据。我想以一种已经填写了用户数据的形式显示帐户数据，即用户名，电子邮件，地址...

然后，用户可以修改表单中的数据并提交此表单，以更新其用户信息。

我正在使用v-model将表单输入绑定到数据中名为accountInfo的对象，如下所示：

data() {
    return {
        accountInfo: {
                firstName: ''
        }
    }
}

这是我模板中表单输入的示例：

<input v-model.trim="accountInfo.firstName" type="text" class="form-control" id="first-name" />

对象中键的值当前为空字符串，但我希望这些值来自名为userProfile的对象，该对象是vuex中的状态属性。

在我的“编辑帐户”组件中，我通过导入来映射vuex状态：

import { mapState } from "vuex";

然后在计算属性中使用以下内容

computed: {
    ...mapState(["userProfile"])
}

我想做的是，不是使用空字符串作为accountInfo的值，而是从从vuex映射的userProfile计算属性中为其分配值，如下所示：

data() {
        return {
            accountInfo: {
                    firstName: this.userProfile.fristName,
            }
        }
    }

这将为我的表单提供所需的初始数据，但是不幸的是，这不起作用，大概是因为数据在生命周期中的呈现时间早于计算出的属性。

完整代码：

EditAccount.vue

<template>
    <div class="container-fluid">
        <form id="sign_up_form" @submit.prevent>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <input v-model.trim="signupForm.firstName" type="text" class="form-control" id="first_name" />
                </div>
            </div>
        </form>
    </div>
</template>

<script>
import { …

我正在构建一个可用于设置各种 vuex 属性的组件，具体取决于路由中传递的名称。这是它的天真要点：

<template>
  <div>
    <input v-model="this[$route.params.name]"/>
  </div>
</template>

<script>
export default {
  computed: {
    foo: {
      get(){ return this.$store.state.foo; },
      set(value){ this.$store.commit('updateValue', {name:'foo', value}); }
    },
    bar: {
      get(){ return this.$store.state.bar; },
      set(value){ this.$store.commit('updateValue', {name:'bar', value}); }
    },
  }
}
</script>

请注意，我传递this[$route.params.name]给v-model, 以使其动态化。这适用于设置（组件加载正常），但是在尝试设置值时，我收到此错误：

Cannot set reactive property on undefined, null, or primitive value: null

我认为这是因为this内部v-model变得未定义（？）

我怎样才能使这项工作？

更新

我也很想知道为什么这不起作用（编译错误）：

<template>
  <div>
    <input v-model="getComputed()"/>
  </div>
</template>

<script>
export default {
  computed: {
    foo: …

完整错误：

[plugin:vite:vue] Transform failed with 1 error:
/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73: 
ERROR: Invalid assignment target

"/home/projects/vue3-vite-typescript-starter-jkcbyx/src/App.vue:33:73"

Invalid assignment target
31 |        ? (_openBlock(), _createElementBlock("div", _hoisted_2, [
32 |            _withDirectives(_createElementVNode("textarea", {
33 |              "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($setup.np?.description) = $event))
   |                                                                           ^
34 |            }, null, 512 /* NEED_PATCH */), [
35 |              [

这里是App.vue：

<script setup lang="ts">
import { ref } from 'vue'

interface Thing {
  description: string
}

const np = ref<Thing>({
  description: 'asdf asdf asdf',
}) …