vuejs2 相关问题

我在将正确的数据发送到 Vue 组件中子组件的事件处理程序时遇到问题。这是我的代码：我在将正确的数据发送到 Vue 组件中子组件的事件处理程序时遇到问题。这是我的代码： <template> <div> <div v-for="item in [1, 2, 3]"> <div @click=test(item)>test</div> <ConfirmModal v-if="showModal" @confirmed=test(item) /> <button v-on:click="showModal = true" ></button> </div> </div> </template> <script> import ConfirmModal from 'ConfirmModal' export default { components: {ConfirmModal}, data() { return {showModal: false} }, methods: { test(item) { console.log(item); this.showModal = false; }, }, } </script> 这是子组件的代码： <template><div class="modal" @click.self="$emit('confirmed')">subtest</div></template> 所以，基本上，我这里有一个数字数组，并使用 v-for 来迭代数组。为每一项创建一个 test 标签、一个子组件（包含 subtest 标签）和一个按钮。单击按钮时，将显示子组件。当我单击子组件（subtest标签）时，它消失了。 div 是一个标准组件，单击它时会发出 @click 事件。 confirmModal 是一个非常简单的组件，它监听 @click 事件并将它们重定向到 @confirmed 事件。因此，这段代码生成 3 × 3 项。当我单击任何标签时，会调用 test 方法来记录该项目的值。当我单击任何 test 标签时，我会在控制台中获得正确的值，即第一个项目为 1，第二个项目为 2，依此类推。但是，当我单击任何 subtest 标签时，无论我单击哪个链接，我总是会得到 3。（如果我更改数组中项目的顺序，那么我总是会得到放在数组最后位置的项目）。我不明白这里发生了什么，这是以相同的方式调用相同的方法。为什么当我点击 3 标签时 subtest 总是登录到控制台？如果你想知道我的子组件中的 class=modal 是用来做什么的，我不知道。这是一个非常复杂的项目中两个组件的骨架，由构建在 Liferay 之上的数千个文件组成，并且在许多目录中定义了 .modal 的文件超过十个。所以我不确定这个特定组件从哪个文件加载这个类。我没有把它从这个骨架代码中扔掉，只是因为当我从子组件的 div 中删除这个类时，一切都工作正常。我不知道为什么。类如何阻止接收正确的数据？我不明白这个。我知道这个错误可能无法重现，因为我没有提供.modal样式的定义，但我还是发布了它，因为我希望您可以在代码中看到其他错误或提出另一种方法如何在 test 事件上执行 @confirmed 方法。我正在使用 Vue 2。当我查看您的代码时，您可能忘记在检索发出的事件值时传递参数： <template><div class="modal" @click.self="$emit('confirmed', argumentShouldBeInserted)">subtest</div></template> 这里argumentShouldBeInserted可以是对象、数组或单个变量。只需调用父组件中的方法即可： <ConfirmModal v-if="showModal" @confirmed="test" />

javascript vue.js vuejs2 vue-component

回答 1 投票 0

VueJs 动态 v-on 事件可能吗？

是否可以在VueJS中设置动态事件？我尝试构建一个动态表单作为具有可以监听所有内容的输入的组件。这里有一个例子：从“vue”导入 Vue；让 formItems...

javascript laravel-5 vuejs2

回答 4 投票 0

将 Bootstrap-Vue 文本字段更改为 mm/dd/yyyy 格式的正确方法

我正在使用 Bootstrap-Vue 组件，并寻找一种将输入日期字段自定义为 mm/dd/yyyy 格式的方法。有什么正确的方法吗？我正在使用 Bootstrap-Vue <b-form-datepicker> 组件，并寻找一种将输入日期字段自定义为 mm/dd/yyyy 格式的方法。有什么合适的方法吗？ <b-input-group class="mb-3"> <b-form-input id="example-input" v-model="dateOfBirth" type="text" placeholder="MM-DD-YYYY" locale="en-US" autocomplete="off" ></b-form-input> <b-input-group-append> <b-form-datepicker v-model="dateOfBirth" button-only right locale="en-US" :date-format-options="{ year: 'numeric', month: 'short', day: '2-digit', weekday: 'short' }" aria-controls="example-input" ></b-form-datepicker> </b-input-group-append> </b-input-group> 文档https://bootstrap-vue.org/docs/components/form-datepicker 您只需将 selectedFormatted 中的 b-form-datepicker 值分配给 v-model 的 b-form-input 值即可实现。注意：对 b-input-group 和 b-form-datepicker 使用不同的 v-model 值演示： new Vue({ el: '#app', data() { return { value: '', inputValue: '' } }, methods: { onContext(ctx) { this.inputValue = ctx.selectedFormatted; } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> <link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <div id="app"> <label for="example-input">Choose a date</label> <b-input-group class="mb-3"> <b-form-input id="example-input" v-model="inputValue" type="text" placeholder="MM/DD/YYYY" autocomplete="off" ></b-form-input> <b-input-group-append> <b-form-datepicker v-model="value" button-only right locale="en-US" aria-controls="example-input" :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }" @context="onContext" ></b-form-datepicker> </b-input-group-append> </b-input-group> </div> 将每个组件设置为数字是否无法达到正确的格式？ <b-form-datepicker :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }" locale="en" ></b-form-datepicker> 给予：9/16/2020 格式 dd/mm/yyyy 这将更新实际的日期选择器和 selectedDate，值： <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <link rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> <link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <div id="app"> <label for="example-input">Choose a date</label> <b-input-group class="mb-3"> <b-form-input id="example-input" v-model="formattedDate" type="text" placeholder="DD/MM/YYYY" autocomplete="off" ></b-form-input> <b-input-group-append> <b-form-datepicker v-model="selectedDate" button-only right locale="en-US" aria-controls="example-input" :date-format-options="{ year: 'numeric', month: 'numeric', day: 'numeric' }" ></b-form-datepicker> </b-input-group-append> </b-input-group> </div> <script>new Vue({ el: '#app', data() { return { selectedDate: '', formattedDate: '' } }, watch: { selectedDate(newValue) { if (newValue) { const parts = newValue.split('-'); this.formattedDate = parts[2] + '/' + parts[1] + '/' + parts[0]; } else { this.formattedDate = ''; } }, formattedDate(newValue) { if (newValue) { const parts = newValue.split('/'); this.selectedDate = parts[2] + '-' + parts[1] + '-' + parts[0]; } else { this.selectedDate = ''; } } } })</script>

vue.js vuejs2 bootstrap-vue vuejs3 vuejs-datepicker

回答 3 投票 0

Chart.js 3.9 和 Vue：无法处理 onClick 事件

通常，StackOverflow 是我的最后手段，因为我不喜欢被惹恼，我想你也不喜欢，但我很绝望。我想捕获图表栏上的点击，但我在日志中没有看到任何痕迹

javascript vuejs2 chart.js

回答 1 投票 0

集中无线电组 Vuetify

我无法集中 v-radio-group。这是我得到的： ...

javascript css vue.js vuejs2 vuetify.js

回答 3 投票 0

POST http://localhost/broadcasting/auth 404（未找到）错误显示

我正在尝试让我的应用程序连接到私人频道上的推送器。但我在控制台中收到以下错误： POST http://localhost/broadcasting/auth 404（未找到）推手：

laravel vuejs2 laravel-5.4 pusher laravel-echo

回答 8 投票 0

使用 cdn 时，vuejs 应用程序未运行：版本 3

在我当前的笔记本电脑上，我没有 vuejs 配置，因此我使用了 cdn 链接，但代码未运行 <p>在我当前的笔记本电脑上，我没有 <strong>vuejs</strong> <strong>配置</strong>，因此我使用了 <strong>cdn</strong> 链接，但代码未运行</p> <pre><code><html> <head> </head> <body> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> createApp({ let message = "hello !" } }).mount('#app') </script> </body> </html> </code></pre> <p>我错过了什么？</p> <p>顺便说一句，正如在此网站上检查的那样：<a href="https://vuejs.org/guide/quick-start#using-vue-from-cdn" rel="nofollow noreferrer">https://vuejs.org/guide/quick-start#using-vue-from-cdn</a></p> <p>我应该使用“<strong>setup</strong>”和“<strong>ref</strong>”，但这不是我使用的..（我之前对cdn有一点经验），我相信还有另一种方法</p> </question> <answer tick="false" vote="0"> <p>在 Vue 3 中，与 Vue 2 相比存在一些差异，您编写的代码反映了 Vue 2 风格。具体来说，您正在使用 createApp，但尝试直接在其中声明消息变量，这将不起作用，因为 Vue 3 需要不同的方法来处理数据。</p> <p>以下是如何使用 CDN 更正代码以与 Vue 3 配合使用：</p> <p><strong>更新代码：</strong></p> <pre><code><html> <head> </head> <body> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> <div id="app">{{ message }}</div> <script> const { createApp } = Vue; createApp({ data() { return { message: "hello !" }; } }).mount('#app'); </script> </body> </html> </code></pre> <p><strong>主要变化：</strong></p> <ol> <li>数据函数：在Vue 3中，您需要定义一个数据函数返回一个包含反应数据的对象。</li> <li>访问createApp：由于您使用的是CDN中的全局Vue实例，因此您需要从Vue中解构createApp。这应该可以解决您的问题并且使用 CDN 链接正确运行 Vue 3 应用程序。</li> </ol> </answer> </body></html>

vue.js vuejs2 vuejs3 vue-component

回答 0 投票 0

Vue 调用子子函数的最佳实践？

假设你有一个vue项目在哪里。 App.vue 有一个按钮和一个用于设置画布的子 CanvasView.vue 文件。 CanvasView.vue 文件有一个绘制立方体的子 CubeComponent.vue

vue.js vuejs2 vuejs3 vue-component coding-style

回答 1 投票 0

如何在Nuxt的asyncData中重定向

我是 vue.js 的新手，我有一个简单的问题。我有如下代码： asyncData({ 参数, 错误 }) { 返回 Job.api() .fetchByID(params.id) .then((响应) => {

vue.js vuejs2 vue-component nuxt.js vue-router

回答 3 投票 0

转换 vuejs 未捕获 RangeError：超出最大调用堆栈大小

我正在学习 vuejs 中的转换。我正在 vuejs 中创建转换并收到错误“超出最大调用堆栈大小”，但如果我注释掉代码，它会正常工作。我仍然...

vue.js vuejs2 transition

回答 1 投票 0

通过 SAML 2.0 和 ADFS 验证 Vue 2 SPA

过去几周我做了很多研究，但没有找到完全适合我的问题的情况，所以我希望我可以向社区求助。我的场景的高级视图...

.net-core vuejs2 saml-2.0 adfs

回答 2 投票 0

Vue.js v-bind：<img>元素的src不显示图像

我有一系列植物。每株植物都是一个对象，包括其名称、特征和图像路径。我想在 v-for 列表中显示它们。我尝试过的：我有一系列植物。每株植物都是一个对象，包括其名称、特征和图像路径。我想在 v-for 列表中显示它们。我尝试过的： <img v-bind:src="plant.img"> 还有这个： <img v-bind:src="'./../../assets/plants/' + plant.name + '.jpg'"> 均未显示图像。但是当我放置图像路径时，像这样： <img src="./../../assets/plants/rose.jpg"> 它显示了。这也不是 v-for 错误。我的代码有什么问题吗？ data() { return { plants: [ { name: 'Rose', sun: 4, water: 6, care: 5, img: "./../../assets/plants/rose.jpg" }, { name: 'Mint', sun: 8, water: 3, care: 4, img: "./../../assets/plants/mint.jpg" }, { name: 'Thyme', sun: 7, water: 4, care: 3, img: "./../../assets/plants/thyme.jpg" }, { name: 'Oregano', sun: 4, water: 6, care: 5, img: "./../../assets/plants/oregano.jpg" }, { name: 'Lavanda', sun: 8, water: 3, care: 4, img: "./../../assets/plants/lavanda.jpg" }, { name: 'Patchouli', sun: 7, water: 4, care: 3, img: "./../../assets/plants/patchouli.jpg" }, ] }}; 嗨，试试这个，也许是 webpack 问题 <img :src="getSrc(plant.name)" v-bind:alt="pic"> 并添加到方法中。 methods: { getSrc(name) { var images = require.context('../../assets/plants/', false, /\.jpg$/); return images('./' + name + ".jpg") } } https://jsfiddle.net/khenxi/vcf57d0f/ 我导入了我的图像： import logo from '@/assets/images/logos/my-logo.png'; 我的操作符数组中的对象： { id: 1, name: 'logo', logo: logo, tpe: 22, } 然后将其与 v-bind 一起使用: <img :src="operator.logo" height="150" alt="operator logo" />

html image data-binding vue.js vuejs2

回答 2 投票 0

在 JavaScript 应用程序中添加新行后数据表未更新

我正在开发一个 JavaScript Web 应用程序，它使用 DataTables 来显示教师列表。我遇到一个问题，添加新讲师后数据表不会立即更新...

javascript jquery vue.js vuejs2 datatables

回答 2 投票 0

vuejs2 相关问题

最新问题