小编Tol*_*ela的帖子

我发现了这个错误并阻止了我的网络应用程序。

2:32:22 PM [vite] Internal server error: v-model cannot be used on a prop, because local prop bindings are not writable.
Use a v-bind binding combined with a v-on listener that emits update:x event instead.
  Plugin: vite:vue
  File: /Users/julapps/web/myapp/src/components/switch/AudienceTimerSlide.vue

我想让计时器数据成为数据模型（可编辑）及其来自组件道具的默认值。为什么这不起作用？我对 vuejs 很陌生，我该如何解决这个问题？恳请帮忙...

<template>
----
<div class="field-body">
    <div class="field">
        <div class="control">
            <input @keypress.enter="save" v-model="timer" type="number" class="input is-normal">
        </div>
    </div>
</div>
-----
</template>

<script>

export default {

    props:['id', 'timer'],
    setup(props, context){
    
        -----
        
        const save = async() => {
            // save form
        } …

Nuxt2我正在使用@nuxtjs/composition-api和 在应用程序上设置测试@vue/test-utils。

此外，还有一个使用 @和 的vue-CLIUI 库。vue/composition-apivue-demi

问题是，即使context按照此处的解决方案进行了嘲笑，我们的商店仍然存在undefined并且测试失败。

///// SET UP /////

该Nuxt2应用程序设置如下：

Package.json

 "dependencies": {
   "@nuxtjs/composition-api": "^0.20.2",
   "core-js": "2",
 }

 "devDependencies": {
   "@vue/test-utils": "^1.3.0",
   "babel-core": "^7.0.0-bridge.0",
   "babel-jest": "^28.1.0",
   "jest": "^28.1.0",
   "jest-environment-jsdom": "^28.1.0",
   "jest-junit": "^14.0.0",
   "vue-jest": "^3.0.7",
 }

nuxt.config.js

 alias: {
    'vue-demi': '@nuxtjs/composition-api',
  },

jest.config.js

module.exports = {
  verbose: true,
  testEnvironment: 'jsdom',
  moduleFileExtensions: ['js', 'vue', 'json'],
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/$1',
    '^~/(.*)$': '<rootDir>/$1',
    '^vue$': 'vue/dist/vue.common.js', …

我想在 vue3 中使用headless ui 模态，但问题是我不明白如果模态是一个组件，如何从父级（App.vue）切换模态。

我尝试在 Modal.vue 中传递一个 prop，但它不起作用，我的策略是使用 modalActive prop 并观察它并调用适当的函数来切换模态，但它根本不起作用。

无头 UI 中的示例使用了一个按钮，但它位于组件内部，因此显然它可以毫无问题地访问该组件的功能。

我的代码：

应用程序.vue

<template>
  <Modal>
    <template v-slot:default>
      <LoginForm />
    </template>
  </Modal>
</template>


<script setup lang="ts">

import Modal from './components/Modal.vue';
import LoginForm from './components/LoginForm.vue';
import { ref } from 'vue';

</script>

Modal.vue

<template>
    <TransitionRoot appear :show="isOpen" as="template">
        <Dialog as="div" @close="closeModal">
            <div class="fixed inset-0 z-10 overflow-y-auto">
                <div class="min-h-screen px-4 text-center">
                    <TransitionChild
                        as="template"
                        enter="duration-300 ease-out"
                        enter-from="opacity-0"
                        enter-to="opacity-100"
                        leave="duration-200 ease-in"
                        leave-from="opacity-100"
                        leave-to="opacity-0"
                    >
                        <DialogOverlay class="fixed inset-0" />
                    </TransitionChild> …

假设我创建了一个自定义组件Comp.vue，它基本上是一个带有model-valueprop 和 的包装输入元素@update="$emit('update:modelValue', $event.target.value)。

它可能看起来像这样：

<template>
  <div>
  <label :for="name" class="block relative">
    <div>
        {{ label }}
    </div>
        <input
          :name="name"
          :type="type"
          :value="modelValue"
          @input="$emit('update:modelValue', $event.target.value)"
        />
  </label>
    </div>
</template>

<script>

export default {
  props: {
    label: {
      required: true,
      type: String,
    },
    modelValue: {
      required: false,
      default: "",
      type: [String, Number],
    },
    type: {
      default: "text",
      type: String,
    },
    name: {
      required: false,
      type: String,
      default: "",
    },
  },
  emits: ["update:modelValue"],
};
</script>

现在我已将该组件导入到 App.vue 中。

为什么这有效： …

我将 Vue.js (2.6) 与 DataTables.js 一起使用并尝试捕获页面更改事件。

Datatables 中的页面更改事件被命名（与所有 DataTables 事件一样，它在点后page.dt具有命名空间）dt

如果我尝试按照文档执行此操作，则不起作用。
我想，它不起作用，因为 Vue 使用事件名称中的点来定义事件修饰符，例如click.once

我的问题是：有没有办法使用 Vue 捕获名称中带有点的此类事件？

这是 HTML 指令：

 <table class="table" id="dataTable" v-on:page.dt="pageChange">

这是我的方法pageChange：

  methods: {
            pageChange(e) {
                var info = datatable.page.info();
                alert('Showing page: ' + info.page + ' of ' + info.pages);
           }
  }
                

以下 jQuery 事件处理程序完美运行：

  $('#dataTable').on('page.dt', function () {
            var info = datatable.page.info();
            alert('Showing page: ' + info.page + ' of ' + info.pages);
  });

 <table class="table" …

如果我从数据源获取NotesDocument对象,更改某些字段然后保存数据源,而不直接保存NotesDocument,则不会保存更改.

例如:

var doc:NotesDocument = document1.getDocument(true);
doc.replaceItemValue("TestField", "Test");

我使用简单的操作保存数据源,文档中的字段"TestField"为空.

如何使用后台文档中的更改来更新数据源？