Component是一个强大的Vue功能，允许扩展基本HTML元素以封装可重用代码。
有没有办法去掉vue组件中grapesjs编辑器的AssetManager的“添加图片”按钮
我想删除“添加图像”按钮及其文本框。有没有办法通过设置 assetManager 的配置或其他方式来做到这一点？ this.editor = 新的grapesjsEditor.init({
我尝试将 Chart.js 作为 vue 组件嵌入到我的应用程序中。 当我尝试将新数据添加到图表数据集时，我收到错误： 未捕获的内部错误：递归过多 推送反应性.esm-bu...
我正在构建一个 Vue.js 应用程序，需要根据某些条件有条件渲染多个表。我有一组标志来确定应呈现哪些表，并且我
Vue 具有 v 模型修饰符，例如数字： 我正在编写一个抽象 Field 组件，它包装输入，并且可能需要选择包含 mod...
我创建了一个简单的“more-less text”组件，它基于 Tailwind 隐藏类和绑定的 more 变量。代码如下： ... 我创建了一个简单的“more-less text”组件，它基于 Tailwind hidden 类和绑定的 more 变量。代码如下： <!-- More.vue --> <template> <section :class="{ hidden: more }"> <slot /><!-- long content will be inside --> <p class="cursor-pointer" @click="toggle"> less </p> </section> <p :class="{ hidden: !more }" class="cursor-pointer" @click="toggle"> more </p> </template> <script setup> let more = ref(true); function toggle() { more = !more; console.log(more); // true, false - as expected } </script> 该组件在其他地方使用如下： <template> Always visible content. <More>Some long content with toggled visibility.</More> </template> 我看到正确的控制台输出然后进行测试。但其余“更多”内容部分并未出现。怎么了？ 你应该使用 more.value = !more.value; 因为 more 是 参考。
所以，我一直在谷歌和这里进行一些搜索，以找出如何在制表器表格单元格中显示 vue 组件。 我所看到的大部分内容都非常过时（3-4 年以上...
我讨厌在代码中重复事情。现在我正在 main.js 中导入这样的 vue 文件。 从 '../../src/components/default.vue' 导入默认值； 从 '../../src/components... 导入 Home
我正在尝试使用内联模板来渲染组件，这样我的 JS 中就不必包含 HTML。另外，我不需要编译步骤。 我不确定我做错了什么 索引.html 我正在尝试使用内联模板来渲染组件，这样我的 JS 中就不必包含 HTML。另外，我不需要编译步骤。 我不知道我做错了什么 index.html <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>test component</title> </head> <body> <h1>test component</h1> <div id="app"> <p>mode: [[ mode ]]</p> <main-component> <template id="mainslot" inline-template> <p> [[ data ]] </p> </template> </main-component> </div> <script type="importmap"> { "imports": { "vue": "vue.esm-browser.js", "main_vue": "testcomp.js" } } </script> <script src="testmain.js" type="module"></script> </body> </html> testcomp.js import { ref } from 'vue'; export default { name: 'MainComponent', setup() { const data = ref([1,2,3]); return {data}; }, template:'#mainslot' }; testmain.js import { createApp, ref } from 'vue'; import { default as MainComponent } from 'main_vue'; const myapp = createApp( { components: { MainComponent }, setup() { return { mode: 'blue' }; }, } ); myapp.config.compilerOptions.delimiters = ['[[', ']]']; myapp.mount('#app'); 当我加载页面时，呈现“模式：蓝色”，但我遇到两个问题： [Vue warn]：无法解析组件：maincomponent 如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。 和 [Vue warn]：属性“data”在渲染期间被访问，但未在实例上定义。 为什么组件没有执行我想要的操作？ 更新 我已将标签更改为 <main-component>，现在我收到了新错误！ [Vue warn]：模板元素未找到或为空：#mainslot 在 在 目前我正在使用不内联模板的解决方法 <!DOCTYPE html> <html> <head> <meta charset="utf8"> <title>test component</title> </head> <body> <h1>test component</h1> <div id="app"> <p>mode: [[ mode ]]</p> <main-component> </main-component> </div> <script type="importmap"> { "imports": { "vue": "vue.esm-browser.js", "main_vue": "testcomp.js" } } </script> <script src="testmain.js" type="module"></script> <template id="mainslot"> <p> [[ data ]] </p> </template> </body> </html>
我正在尝试创建一个可重用的警报/小吃栏组件。我这样声明它们： Snackbar.vue 我正在尝试创建一个可重用的警报/小吃栏组件。我这样声明它们： Snackbar.vue <template> <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right> <strong> {{ message }} </strong> </v-snackbar> </template> <script> export default { name: 'Snackbar', props: { show: String, color: String, message: String } } </script> <template> <v-snackbar transition="true" timeout="2000" :show="`${show}`" :color="`${color}`" absolute top outlined right> <strong> {{ message }} </strong> </v-snackbar> </template> <script> export default { name: 'Snackbar', props: { show: String, color: String, message: String } } </script> 我导入了，并将问题传递给他们，如下所示： import Snackbar from '../../../components/Snackbar' <Snackbar v-if="alert" color="alertColor" message="alertMessage" /> <Snackbar show="alert" color="alertColor" message="alertMessage" /> 我已经尝试了上面的 2 行，这些是这 3 个变量的值 警报=true 警报颜色=green 警报消息 = create.vue?f4fe:631 DB error - insert_marketing_campaign: Duplicate entry 'TEST' for key 'MARKETING_CAMPAIGN_AK' 结果 我在控制台中没有看到任何错误，但也没有看到小吃栏。请帮忙 8！ 您没有正确传递 props 值，您必须这样做： ps。为了说明，我添加了一个事件侦听器（更新）来处理关闭按钮（如果不想使用，请删除） <Snackbar :show="alert" :color="alertColor" :message="alertMessage" v-on:update="alert = $event" /> Snackbar.vue 我也在这里改变了一些东西： 在属性中使用 props 的方式是有效的，但如果不需要连接其他值，请保持简单 prop show 必须是布尔值 添加了一个美丽按钮，如果你想使用 v-model 控制小吃栏展示，但是你不能直接在 v-model 上使用 show 属性，这就是为什么我们有一个计算属性“show2”（非常有创意）来读取（get）值如果你想改变，道具 show 和 emit 自定义事件“update”它(设置) <template> <v-snackbar transition="true" timeout="2000" v-model="show2" :color="color" absolute top outlined right> <strong> {{ message }} </strong> <v-btn color="red" text @click="show2 = false">Close</v-btn> </v-snackbar> </template> <script> export default { props: { show: Boolean, color: String, message: String, }, computed: { show2: { get() { return this.show; }, set(value) { this.$emit("update", value); }, }, }, }; </script> 希望有帮助！ ;) 检查我制作的这个codesandbox：https://codesandbox.io/s/stack-71244492-vuex-snackbar-klfunf?file=/src/store/index.js 您可以在 App.vue 文件中设置全局小吃栏并使用 Vuex 进行更新。在您的 vuex 商店中，您设置了一个 Snackbar 对象并创建了一个简单的更新突变并显示操作。 // store/index.js import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({ state: { snackbar: { active: false, color: "", message: "", timer: 4000 } }, mutations: { UPDATE_SNACKBAR(state, snackbar) { state.snackbar = snackbar; } }, actions: { showSnack({ commit }, { message, color, timer }) { commit("UPDATE_SNACKBAR", { active: true, color: color, message: message, timer: timer }); } } }); 然后在你的App.vue中像这样设置 <v-snackbar v-model="snackbar.active" :color="snackbar.color" :right="true" :bottom="true" :timeout="snackbar.timer" > {{ snackbar.message }} <template #action="{ attrs }"> <v-btn color="white" text v-bind="attrs" @click="snackbar.active = false" > Close </v-btn> </template> </v-snackbar> <script> import { mapState } from "vuex"; export default { name: 'App', data: () => ({ drawer: false, }), computed: { ...mapState(["snackbar"]) } } </script> 然后您可以通过执行此操作从任何组件触发您的小吃栏 // views/Home.vue this.$store.dispatch('showSnack', { message: 'Testing, main page.', color: 'green darken-1' }) // views/About.vue this.$store.dispatch('showSnack', { message: 'Hello from about!', color: 'red darken-1', timer: 2000 }) <script setup> import { computed } from 'vue' const { notificationText, modelValue } = defineProps({ notificationText: { type: String, required: true }, modelValue: { type: Boolean, required: true } }) const isVisible = computed(() => modelValue) </script> <template> <v-snackbar v-model="isVisible" @update="$emit('update:modelValue', $event)"> {{ notificationText }} <template #actions> <v-btn @click="$emit('update:modelValue', false)"> Close </v-btn> </template> </v-snackbar> </template>
为什么在 v-for 中删除并添加回项目时，视图中的属性没有更新
我正在制作一个功能，用户可以添加产品图像，并且它具有撤消/重做功能。我尽可能地减少它以显示我的问题。 我在...
我正在探索 VUE 并尝试使用 fetch 从外部 API 获取帖子。但是，当尝试从 ref 获取值时，它显示为空。 这是我到目前为止所做的。 <question vote="0"> <p>我正在探索 VUE 并尝试使用 fetch 从外部 API 获取帖子。但是在尝试从 ref 获取值时，它显示为空。</p> <p>这是我到目前为止所做的。</p> <pre><code><script setup> import {onMounted, ref } from 'vue'; const Posts = ref([]); onMounted( async () => { const Url = 'https://jsonplaceholder.typicode.com/posts'; try { const response = await fetch(Url); if (!response.ok) { throw new Error(`Response status: ${response.status}`); } Posts.value = await response.json(); } catch(e) { console.log(`Error: ${e}`) } }) console.log(Posts) </script> <template></template> </code></pre> <p>尝试安慰帖子时，它显示为空。 我想将 Post 的值传递给另一个组件。但因为这里显示为空。我一无所知。</p> </question> <answer tick="false" vote="0"> <p>看这个：<a href="https://vuejs.org/tutorial/#step-12" rel="nofollow noreferrer">https://vuejs.org/tutorial/#step-12</a> 然后点击“告诉我”按钮</p> </answer> </body></html>
我在父组件中有一个子组件。每当单击子组件时，我都需要对其应用一个名为 .selected 的类。 家长.vue 我在父组件中有一个子组件。每当单击子组件时，我都需要对其应用一个名为 .selected 的类。 Parent.vue <template> <ol> <li v-for="(Contact, index) in Contacts"> <Component-Contact :ref="(el) => { RefContacts[index] = el}" @click="onClick(RefContacts[index])" :Contact="Contact" @Selected="(Data) => onSelected(Data)"/> </li> </ol> </template> <script> import ComponentContact from '../components/Contact.vue' .... setup() { const RefContacts = ref([]); function onSelected(Contact){ //Adds data received from child component to an array } onClick(el) { el.toggleClass('selected') // Returns error saying toggleClass is not a function!! } return { Contacts, // An array of contacts from the DB onSelected } } </script> 子组件Contact.vue <template> <div style="cursor: pointer" @click="onClick($el, Contact)"> <p>{{Contact.Forename}}</p> <p>{{Contact.Surname}}</p> </div> </template> <script> ... props: { Contact: { type: Object, required: true }, emits: 'Selected', setup() { function onClick(el, Contact) { el.toggleClass('selected') // This works but I don't want to set it here in the child return context.emit('Selected', { FullName: Contact.forename + ' ' + Contact.surname } } } </script> 如何让 Vue 将 .selected 类应用到 <Child-Component /> 视图中的 Parent.vue？我想将它设置在父组件中（或使用它的其他地方），然后在用户完成他正在做的事情时删除该类。我觉得这比在子组件中设置它更灵活。 首先，您不应该自己在 DOM 元素上应用该类。 使用:class="{ selected: /* condition here */ }" 一个基本示例，其中只能选择一个项目（选择另一个项目将取消选择前一个项目）： const { createApp, ref } = Vue const app = createApp({ setup() { const selected = ref(null) return { selected, select: (index) => (selected.value = selected.value === index ? null : index) } } }).mount('#app') li { cursor: pointer; } .selected { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script> <div id="app"> <ul> <li v-for="(_, index) in 6" @click="select(index)" :class="{ selected: index === selected }" v-text="'item'" /> </ul> </div> 您可以在此处单独选择项目： const { createApp, ref } = Vue const app = createApp({ setup() { const items = ref( Array.from({ length: 7 }).map(() => ({ selected: false })) ) return { items, toggle: (index) => items.value.splice(index, 1, { selected: !items.value[index].selected }) } } }).mount('#app') li { cursor: pointer; } .selected { color: red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script> <div id="app"> <ul> <li v-for="({ selected }, index) in items" @click="toggle(index)" :class="{ selected }" v-text="'item'" /> </ul> </div>
错误：请求的模块“vue”未提供名为“default”的导出
观看价值：{{ WatchValue }} ... <template> <div id="app"> <p>Watched Value: {{ watchedValue }}</p> <input v-model="inputValue" placeholder="Enter a value" /> </div> </template> <script> import Vue from 'vue'; const app = new Vue({ el: '#app', data() { return { inputValue: '', watchedValue: '' }; }, watch: { inputValue(newValue) { this.watchedValue = `You entered: ${newValue}`; } } }); </script> 在 setup 函数中，我们创建一个具有 inputValue 和 WatchdValue 属性的响应式对象状态。 我们使用 watch 函数来监视 inputValue 的变化。每当 inputValue 发生变化时，就会触发回调函数。在本例中，我们通过将您输入的字符串指定为 ${newValue} 来更新 WatchedValue 以包含输入的值。 在模板中，我们使用Vue的数据绑定语法（{{variable}}）显示watchedValue，并使用v-model将输入字段绑定到inputValue。 当用户在输入字段中键入内容时，inputValue 会进行反应式更新，从而触发手表效果。然后，watchedValue 会更新以显示输入的值，前缀为“您输入：”。 先看一下这个问题： Vue“导出默认值”与“新 Vue” 我认为你尝试导入你的“组件”，所以你需要提供： export default { components: { myComponent } data () { return {} } ... } 您的语法适用于根组件，不能像那样使用 <my-component></my-component> 在父组件中 要解决此问题，请确保导出您的操作，如下所示 // Import Axios instance with base configuration // Vuex module for authentication and permissions const state = { // }; const mutations = { // }; // Individual actions exported as named exports export async function registerUser(_, { name, email, password, password_confirmation }) { // } // Export the module as a default export export default { namespaced: true, state, mutations, getters, };
我有一个 Form.vue 组件，在其他父组件中使用该组件将用户的数据提交到服务器。 Form.vue 有一个 prop 来指示其父组件是否传递了自己的
我正在尝试以库 element-plus 作为基础构建自己的组件。 到目前为止，当涉及到颜色等简单的东西时，我取得了巨大的成功，可以轻松地转发德...
我想将自定义属性绑定到选项选择菜单。 标签仅具有 selected="selected" 属性 < 我想将自定义属性绑定到选项选择菜单。 <option> 标签仅具有 selected="selected" 属性 <template> <div> <select> <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option> </select> </div> </template> data: { selected: "selected", notSelected: "" } 这不起作用，但如果我将 v-bind:selected 更改为 v-bind:class 那么它会收到适当的类，因此逻辑正在工作，但不适用于 selected 属性。 有什么方法可以使其与此类自定义属性一起使用吗？ 您可以使用 v-model 在选择框中选择默认值： 标记： <div id="app"> <select v-model="selected"> <option value="foo">foo</option> <option value="bar">Bar</option> <option value="baz">Baz</option> </select> </div> 查看型号： new Vue({ el: "#app", data: { selected: 'bar' } }); 这是 JSFiddle：https://jsfiddle.net/Lxfxyqmf/ html: <div id="myComponent"> <select v-model="selectedValue"> <option v-for="listValue in valuesList" :value="listValue"> {{listValue}} </option> </select> <span>Chosen item: {{ selectedValue }}</span> </div> js: var app = new Vue({ el: '#myComponent', data: { selectedValue: 'Two', valuesList: ['One', 'Two', 'Three'] }, 我创建了一个可重用的 select 组件，它也将 modelValue 发送到父组件。 如果您查看第一个选项标签，您可以看到我如何使用 props 创建默认值。 BaseSelect.vue（子组件） <template> <label v-if="label">{{ label }}</label> <select class="field" :value="modelValue" v-bind="{ ...$attrs, onChange: ($event) => { $emit('update:modelValue', $event.target.value); }, }" > <option value="" disabled>{{ defaultValue }}</option> <option v-for="option in options" :key="option" :value="option" :selected="option === modelValue" > {{ option }} </option> </select> </template> <script> export default { props: { label: { type: String, default: "" }, defaultValue: { type: String, default: "Select an item of the list", required: false }, modelValue: { type: [String, Number], default: "Otros" }, options: { type: Array, required: true }, }, }; </script> 父组件 <BaseSelect label="Asunto" defaultValue = "Selecciona un asunto" v-model="contactValues.asunto" :options="asuntos" /> 请注意，您必须在 data() (v-model) 中正确接收此值 使用新的组合 API： <template> <select v-model="selectValue"> <option value="a"> Option a </option> <option value="b"> Option b </option> </select> </template> <script> import { ref } from 'vue'; export default { setup() { // Create a reactive value for our select const selectValue = ref('a'); // Return to the template return { selectValue }; }, }; </script> 所以我不确定这个问题是否已经解决，但我只是想在这里添加另一个选项。 <select v-model="selectedOffice" class="select-style"> <option v-for="(office_id) in OID" :key="office_id"> {{ office_id.office_name }} </option> </select> JS： if (this.OID.length < 2) { this.selectedOffice = this.OID[0].office_name; this.officeID = this.OID[0].office_id; } 因此在这种情况下，如果数组中只有一个选项，我将 v-model 变量设置为数组中的第一个选项。如果有更多选择，概念是相同的。
我正在使用vuejs，我想知道如何控制输入（必要时添加禁用属性）。有没有办法在vuejs中动态添加属性？在我的 Textfield 组件下面： ...
Vue JS 和 Tailwind CSS 中推动侧边栏的按钮
我正在编写一个侧边栏，当分辨率很小时，侧边栏就会消失，如果我单击一个按钮，我的侧边栏就会从屏幕上返回，但我的代码只推送一个白色的div。这是我的代码： 我正在编写一个侧边栏，当分辨率较小时，侧边栏就会消失，如果我单击一个按钮，我的侧边栏就会从屏幕上返回，但我的代码只推送一个白色的 div。这是我的代码： <div class="w-64 space-y-6 border-r px-2 py-4 inset-y-0 left-0 border-gray-100 absolute md:relative md:-translate-x-0 transform -translate-x-full transition duration-200 ease-in-out dark:bg-vd1 dark:border-gray-800 dark:border-opacity-90" :class="{ 'relative -translate-x-0': showSidebar }"> <div class="py-4 px-6"> <div class="mb-4 mx-auto w-full max-w-sm fixed top-4 left-6 inline-block"> <div class="justify-between inline-flex w-full"> <div> <a href="" class="inline-flex" > <img src="../Assets/Img/logo.svg" class="h-9 w-9 pt-1" alt="" /> <p class="font-semibold text-xl pl-4 pt-2 text-indigo-500 text-opacity-90">Vuexy</p> </a> </div> <div> <BreezeCheckbox2 name="sidebar" class="mr-11 mt-3 w-5 h-5 rounded-full" checked/> </div> </div> </div> </div> <div class="flex justify-center"> <BreezeButton class="inline-flex items-center w-56 h-11 bg-gradient-to-r from-indigo-500 to-purple-500 text-white text-sm hover:bg-purple-600 shadow-purple mt-1 normal-case"> <img src="../Assets/Icons/shield.svg" alt="" class="mr-2 w-5 h-5"> <span v-if="selectedLang==='English'" class="font-normal">Access Control</span> <span v-if="selectedLang==='French'" class="font-normal">Contrôle d'accès</span> <span v-if="selectedLang==='German'" class="font-normal">Zugangskontrolle</span> <span v-if="selectedLang==='Portuguese'" class="font-normal">Controle de acesso</span> </BreezeButton> </div> </div> <button @click="showSidebar = !showSidebar" class="lg:hidden md:hidden ml-5 dark:text-gray-300"> ------------------- <script> export default { setup(){ const showSidebar = ref(false) const stayInDropdown = ref(true) const isDark = ref(false) return{ showSidebar, stayInDropdown, isDark, } }, </script> 为了更好地查看，这里有一些图片： 所以你需要显示一个侧边栏： 小屏幕上默认隐藏 默认在中及以上屏幕上可见 用户应该能够在小屏幕上切换侧边栏可见性 Check below example Run the code snippet Open in full screen Play with screen size and toggle sidebar visibility new Vue({ el: '#app', data() { return { showSidebar: false } }, methods: { toggleSidebar() { this.showSidebar = !this.showSidebar } } }) span.icon.menu>div { width: 35px; height: 5px; background-color: black; margin: 6px 0; } <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" class="container h-screen w-screen flex bg-blue-100"> <div class="sidebar p-4 rounded-xl bg-white border border-gray-400" :class="{'block':showSidebar,'hidden md:block':!showSidebar}">Sidebar</div> <div class="sidecontent flex-grow p-4 bg-gray-100"> <div @click="toggleSidebar" class="navbar flex p-4 rounded-xl bg-white"> <span class="icon menu mr-4"> <div></div> <div></div> <div></div> </span> <span>Navigation</span> </div> <div class="content p-4 ">Content</div> </div> </div> new Vue({ el: '#app', data() { return { showSidebar: false } }, methods: { toggleSidebar() { this.showSidebar = !this.showSidebar } } }) span.icon.menu>div { width: 35px; height: 5px; background-color: black; margin: 6px 0; } <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" class="container h-screen w-screen flex bg-blue-100"> <div class="sidebar p-4 rounded-xl bg-white border border-gray-400" :class="{'block':showSidebar,'hidden md:block':!showSidebar}">Sidebar</div> <div class="sidecontent flex-grow p-4 bg-gray-100"> <div @click="toggleSidebar" class="navbar flex p-4 rounded-xl bg-white"> <span class="icon menu mr-4"> <div></div> <div></div> <div></div> </span> <span>Navigation</span> </div> <div class="content p-4 ">Content</div> </div> </div>
我正在尝试将数据传递到 nuxt-link，但当我单击链接时，nuxt-link 仅返回 404 错误。它似乎没有获取和加载文件...... 第二个使用 :href...
我正在尝试监视本地存储： 模板： 令牌 - {{令牌}} 脚本： 计算：{ 令牌（）{ return localStorage.getItem('token'); } } 但它并没有改变...