将此标记用于特定于Vue.js版本2的问题，这是一个用于构建用户界面的开源，渐进式Javascript框架。
<template> <v-layout @drop.prevent="addFiles" @dragover.prevent > <ValidationObserver ref="observer" v-slot="{ invalid }" > <form class="topic-form" @submit.prevent="submit"> <ValidationProvider v-slot="{ errors }" name="Name" rules="max:255" > <v-textarea class="my-2" color="primary" rows="4" v-model="topicText" :counter="255" :error-messages="errors" @paste="pasteFiles" label="Enter message" ></v-textarea> </ValidationProvider> <upload-files /> <v-btn color="primary" class="my-2" type="submit" :disabled="invalid" > Create </v-btn> </form> </ValidationObserver> </v-layout> </template> 我有这样的 vue 组件，它使用另一个名为 UploadFiles 的组件。我需要检查提交时表单中是否存在 topicText 或文件之一。我该怎么做？ 我想您可以使用 $ref 中的 UploadFiles 来从此组件获取任何数据。
Vue/css 专家们您好， 我对 VUE 还很陌生，我现在正在努力学习， 在我开发的所有 VUE 应用程序中，顶部和左侧似乎有一条细细的白色边框......
我想从实例外部访问虚拟机数据，如下所示： myComponent.vue 导出默认值{ 数据（） { 返回 { 姓名：“乔” }; } } main.js var vm = 新...
我有一个名为 people 的数组，其中包含如下对象： 前 [ {id：0，姓名：'鲍勃'，年龄：27}， {id：1，姓名：'弗兰克'，年龄：32}， {id：2，姓名：'乔'，年龄：38} ] 它可以改变： 船尾...
当我尝试 npm run 为我从 GitHub 获得的项目提供服务时，“语法错误：错误：找不到 ESLint 配置”
我尝试从 GitHub 下载并运行发送给我的 Vue.js 项目，但是当我尝试 npm runserve 时，我收到以下错误： 语法错误：错误：未找到 ESLint 配置...
我有一个在 Windows 10 系统上运行的 Vue 2 项目。我的 Node 版本是 v16.13.0，npm 是 8.5.0。当我尝试为应用程序提供服务时遇到一些错误，因此我删除了 node_modules 文件夹并尝试
cms-element configComponent 中有多个组件？
我尝试在我的 configComponent 中放置一个 sw-colorpicker，但它没有显示。 已经尝试过： {% 块 sw_cms_element_test_config %} 我尝试将 sw-colorpicker 放入我的 configComponent 中，但它没有显示。 已经尝试过： {% block sw_cms_element_test_config %} <sw-media-field v-model="imageId" required validation="required" /> <sw-colorpicker value="#fff" :alpha="true" v-model="imageTextBackgroundColor" label="pick a damn color ffs!" /> {% endblock %} 当我添加另一个组件时，它根本不显示。仅显示第一个。例如。在这种情况下，sw-media-field。 我还尝试将每个组件放置在它自己的块中，正如我在其他代码中看到的那样，但这也不起作用。如果我更改组件的顺序，则会显示 sw-colorpicker，但不会显示另一个。 模板的根部应该只有一个元素。要包装多个子项，您可以使用通用组件，例如 sw-container。 <sw-container> <sw-media-field v-model="imageId" required validation="required" /> <sw-colorpicker value="#fff" :alpha="true" v-model="imageTextBackgroundColor" /> </sw-container>
在我的index.js 文件中，我已使用我公司的颜色手动覆盖 Vuetify 主题对象： Vue.use(Vuetify, { 主题： { 主要：'#377ef9'， 次要：'#1b3e70'， 口音：'#ff643d'...
当您单击按钮时，如何将 vuex 中的 getter 等同于 vue 2 中另一个组件中的变量？
当您单击按钮时，如何从 vuex 发送一个操作并将其中一个数据属性与 vuex 的 getter 等同起来？ 当您单击按钮时，如何从 vuex 发送一个操作并将其中一个数据属性与来自 vuex 的 getter 等同起来？ <template> <div id="app"> <div class="btns"> <button id="btn--send" @click="sendData">send data</button> <button id="btn--clear" @click="cleanData">clean data</button> // This place </div> </div> </template> 我的Vuex： export default { state: { dataSelect: "" }, actions: { cleanData({commit}) { commit("clean") } }, mutations: { clean(state) { state.dataSelect = "" } }, getters: { DATA_SELECTED(state) { return state.dataSelect } } } 在此组件中需要更改数据 <template> <div class="SelectFloors"> <p id="title--choose">Выбранный этаж</p> <VueSimpleSelect @change="chooseFloor" :options="floors" v-model="selectedFloor" placeholder="Выберите этаж" class="sel__floor" /> </div> </template> <script> export default { name: "selectFloors", data() { return { floors: [ { label: 'floor 1', value: 1 }, { label: 'floor 2', value: 2 }, { label: 'floor 3', value: 3 }, ], selectedFloor:'' } }, methods: { }, } </script> 在此组件中，当 pepson 单击按钮（在第一个组件中）时需要清理数据， this.selectedFloor 需要 = '' 如何做到这一点？ 谢谢你 请看一下演示（您可以在第二个组件中观看 DATA_SELECTED getter）： const vuexdata = { state: { dataSelect: "" }, actions: { cleanData({commit}) { commit("clean") }, chooseFloor({commit}, payload) { commit("choose", payload) } }, mutations: { clean(state, payload) { state.dataSelect = "" }, choose(state, payload) { state.dataSelect = payload } }, getters: { DATA_SELECTED(state) { return state.dataSelect } } }; const store = new Vuex.Store(vuexdata); const app = { name: 'app', computed: { ...Vuex.mapGetters(['DATA_SELECTED']), }, methods: { ...Vuex.mapActions(['cleanData']), }, template: ` <div class="btns"> <button id="btn--clear" @click="cleanData">clean data</button> <second></second> </div> `, } Vue.component('second', { template: ` <div class="SelectFloors"> <p id="title--choose">Выбранный этаж</p> {{ selectedFloor }} <select @change="chooseFloor(selectedFloor)" v-model="selectedFloor"> <option v-for="(floor, i) in floors" :key="i"> {{ floor.value }} </option> </select> </div> `, computed: { ...Vuex.mapGetters(['DATA_SELECTED']), }, methods: { ...Vuex.mapActions(['chooseFloor']), }, watch: { DATA_SELECTED(newVal) { this.selectedFloor = newVal } }, data() { return { floors: [ {label: 'floor 1', value: 1}, {label: 'floor 2', value: 2}, {label: 'floor 3', value: 3}, ], selectedFloor: this.DATA_SELECTED } }, }) new Vue({ el: '#demo', store, render: h => h(app), }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src=" https://unpkg.com/[email protected]/dist/vuex.js"></script> <div id="demo"></div>
如何访问在 Vue + Buefy 中的作用域样式块中创建的 CSS 变量
通过遵循 Buefy 文档，我能够自定义我的颜色，甚至创建新的颜色，使用 as is-[colorName] 作为 HTML 元素类。 // 导入布尔玛的 </desc> <question vote="1"> <p>通过遵循 <a href="https://buefy.org/documentation/customization/" rel="nofollow noreferrer">Buefy 文档</a>，我能够自定义我的颜色，甚至创建新的颜色，使用 <pre><code>is-[colorName]</code></pre> 作为 HTML 元素类。</p> <pre><code><style lang="scss"> // Import Bulma's core @import "~bulma/sass/utilities/_all"; //Create your own colors. $download: #253091; $download-inverted: findColorInvert($download); // Setup $colors to use as bulma classes (e.g. 'is-twitter') $colors: ( "white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert), "download": ($download, $download-inverted), ); // Import Bulma and Buefy styles @import "~bulma"; @import "~buefy/src/scss/buefy"; //Custom global styles. #app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </style> </code></pre> <p>现在，在页面中，我需要访问颜色变量，例如 $download 来创建简单的渐变。</p> <pre><code><style lang="scss" scoped> @import "~bulma/sass/utilities/_all"; .gradient { background-image: linear-gradient($download, #info); } </style> </code></pre> <p>如何访问另一个 Vue 组件/页面中的变量？</p> <p>我认为由于 App.vue 样式块没有作用域，我可以从任何地方访问新创建的变量，但显然我不能。</p> </question> <answer tick="false" vote="0"> <p>您的 CSS 变量已附加到 #app 容器：</p> <pre><code>#app { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } </code></pre> <p><strong>选项 1：</strong> 一些 Buefy 元素是在应用程序容器外部启动的。例如，Buefy Snackbar。您可以通过将“#app”传递到容器周边来将其附加到此容器，然后将您的 CSS 变量置于其范围内：</p> <pre><code> this.$buefy.snackbar.open({ message: '...', container: '#app', }) </code></pre> <p><strong>选项 2：</strong> 如果您的 Buefy 元素可以接收自定义类，您可能需要使用覆盖定义一个全局类，并将该类作为参数传递给您的元素。</p> </answer> </body></html>
发生此错误并已记录到我的控制台（包括调用堆栈）： ReferenceError：信号未定义 在评估（index.vue：113：1） 在./node_modules/cache-loader/dist/cjs.js?!./
此文本显示在控制台和边缘浏览器中 在评估（index.vue：113：1） 在./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/di...
我们使用的是 Vue 2。有一个功能组件可以获取包含模板代码的字符串 prop。这段代码（可能相当繁重）被编译和渲染。 问题是：家长...
Watch 可以是未定义的属性/嵌套 Watch 属性的默认值
我正在开发一个 Vue2 项目，并且我想观看的属性有问题。 它是这样的： 手表： { 'car.wheels': 函数(){ ... } 有时，轮子是不确定的...
我正在开发一个 Vue2 项目，并且我想观看的属性有问题。 它是这样的： 手表： { 'car.wheels': 函数(){ ... } 有时，轮子是不确定的...
我在我的应用程序上使用 vuetify。设计团队创建了一个扁平化设计，我想更改 vuetify 的主题以匹配模型 我尝试找到一个选项来轻松禁用连锁反应...
我正在使用 vuejs3 和 options api 如下面的代码所示，在提供程序组件中，我提供了对象 isToggleBtnLabelDigitizePolygon 的反应版本。最初，
我有一个接收 prop 选项卡的 Vue 组件。这个道具应该遵循以下模式： [{ id: 字符串 标题：字符串 颜色：`#${字符串}` },{ id: 字符串 标题：字符串 颜色：`#${...
在 vue.js laravel 中如果值为 null 则隐藏 div
如果变量的值为空或空，我想隐藏 div，我正在使用以下代码，但如果该值为空或 NULL，它仍然使用 vue.js 显示相同的 div。 如果变量的值为空或空，我想隐藏 div，我正在使用以下代码，但如果该值为空或 NULL，它仍然使用 vue.js 显示相同的 div。 <p class="user" v-show="Item.date !== 'NULL'"><i class="fa fa-user"></i>{{Item.date }}</p> 这里我检查Item.date是否为空。 您可以按如下方式执行此操作： <p class="user" v-if="Item && Item.date"><i class="fa fa-user"></i>{{Item.date }}</p>