vuejs2 相关问题

将此标记用于特定于Vue.js版本2的问题,这是一个用于构建用户界面的开源,渐进式Javascript框架。

在组件中异步计算?

我正在组件中找到异步计算方法的解决方案: 目前,我的组件是: {{消息}} 导出默认值{ 计算...</desc> <question vote="51"> <p>我正在组件中找到异步计算方法的解决方案:</p> <p>目前,我的组件是:</p> <pre><code>&lt;div class=&#34;msg_content&#34;&gt; {{messages}} &lt;/div&gt; &lt;script&gt; export default { computed: { messages: { get () { return api.get(`/users/${this.value.username}/message/`, {&#39;headers&#39;: { &#39;Authorization&#39;: &#39;JWT ...&#39; }}) .then(response =&gt; response.data) } } }, } &lt;/script&gt; </code></pre> <p>结果: <pre><code>{}</code></pre></p> <p>如何在<pre><code>Promise</code></pre>模式下重写?因为我认为我们可以通过写入 Promise 模式来异步计算。</p> </question> <answer tick="true" vote="51"> <p>计算属性基本上是缓存其结果的函数,这样就不必在每次需要时都进行计算。他们<strong>根据他们使用的无功值自动更新</strong>。</p> <p>您的计算不使用任何反应性项目,因此它是计算的没有意义。它现在返回一个 Promise(假设 <pre><code>then</code></pre> 的通常行为)。</p> <p>尚不完全清楚您想要实现什么,但我最好的猜测是您应该创建一个数据项来保存 <pre><code>response.data</code></pre>,并在 <pre></pre><code>api.get</code><a href="https://v2.vuejs.org/v2/api/#created" rel="noreferrer"> 钩子<pre>中进行 </pre><code>created</code></a> 调用。类似的东西</p> <pre><code>export default { data() { return { //... messages: [] }; }, created() { api.get(`/users/${this.value.username}/message/`, { &#39;headers&#39;: { &#39;Authorization&#39;: &#39;JWT ...&#39; } }) .then(response =&gt; this.messages = response.data); } } </code></pre> </answer> <answer tick="false" vote="26"> <p>es7 通过使用 <pre><code>async</code></pre> 和 <pre><code>await</code></pre> 与 axios 返回的 Promise 结合起来,使得这件事变得非常简单。您需要 <a href="https://github.com/foxbenjaminfox/vue-async-computed/blob/master/README.md" rel="noreferrer">vue-async-compulated</a> 包。</p> <pre><code>export default { asyncComputed: { async myResolvedValue() { return await api.get(`/users/${this.value.username}/message/`, {&#39;headers&#39;: { &#39;Authorization&#39;: &#39;JWT ...&#39; }}) .then(response =&gt; response.data) } } } </code></pre> </answer> <answer tick="false" vote="2"> <p>我遇到了类似的情况,每次数据或道具发生变化时,我都需要重新运行计算函数以从服务器获取数据。</p> <p>无需安装任何额外的包(<pre><code>vue-async-computed</code></pre>或<pre><code>vue3-async-computed</code></pre>,如其他答案所指出),您可以通过创建“虚拟”计算方法来强制重新加载数据。</p> <p>假设您希望在用户每次键入用户名时从服务器获取数据,并且根据键入的内容,您希望显示来自服务器的给定消息。</p> <p>从下面的示例中,本例中的 <pre><code>username</code></pre> 和 <pre><code>messages</code></pre> 都是反应数据,但它们之间没有直接联系,因此让我们通过返回其值来创建一个依赖于 <pre><code>username</code></pre> 的计算,这将强制它每次 <pre><code>username</code></pre> 更改时都会被调用。现在您只需要调用一个可以异步的函数,并在从服务器获取后更新<pre><code>messages</code></pre>。</p> <p>在下面的示例中,我使用“:dummy”只是为了强制调用我的计算函数。</p> <pre><code>&lt;template&gt; &lt;input v-model=&#34;username&#34;&gt; &lt;div class=&#34;msg_content&#34; :dummy=&#34;force_react&#34;&gt; {{messages}} &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default { data: function () { return { messages: &#34;&#34;, username: &#34;&#34;, }; }, computed: { force_react: function() { this.get(); // called every time that this.username updates return this.username; // becase its result depends on username } }, methods: { async get() { // get&#39;s called every time that this.username updates console.log(&#34;Got called&#34;); let response = await api.get(`/users/${this.username}/message/`, {&#39;headers&#39;: { &#39;Authorization&#39;: &#39;JWT ...&#39; }}); this.messages = response.data; } }, } &lt;/script&gt; </code></pre> <p>您可以在 Vue SFC 游乐场中看到一个工作示例 <a href="https://sfc.vuejs.org/#__DEV__eyJBcHAudnVlIjoiPHRlbXBsYXRlPiBcbiA8aW5wdXQgdi1tb2RlbD1cInVzZXJuYW1lXCI+XG4gPGRpdiBjbGFzcz1cIm1zZ19jb250ZW50XCIgOmR1bW15PVwiZm9yY2VfcmVhY3RcIj5cbiAgIHt7bWVzc2FnZXN9fVxuPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0PlxuZXhwb3J0IGRlZmF1bHQge1xuICBkYXRhOiBmdW5jdGlvbiAoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG1lc3NhZ2VzOiBcIlwiLFxuICAgICAgdXNlcm5hbWU6IFwiXCIsXG4gICAgfTtcbiAgfSxcbiAgY29tcHV0ZWQ6IHtcbiAgICBmb3JjZV9yZWFjdDogZnVuY3Rpb24oKSB7ICAvLyBjYWxsZWQgZXZlcnkgdGltZSB0aGF0IHRoaXMudXNlcm5hbWUgdXBkYXRlcyBiZWNhc2UgaXRzIHJlc3VsdCBkZXBlbmRzIG9uIGl0XG4gICAgICB0aGlzLmdldCgpO1xuICAgICAgcmV0dXJuIHRoaXMudXNlcm5hbWU7XG4gICAgfVxuICB9LFxuICBtZXRob2RzOiB7XG4gICAgYXN5bmMgZ2V0KCkgeyAvLyBnZXQncyBjYWxsZWQgZXZlcnkgdGltZSB0aGF0IHRoaXMudXNlcm5hbWUgdXBkYXRlc1xuICAgICAgY29uc29sZS5sb2coXCJHb3QgZ290IGNhbGxlZFwiKTtcbiAgICAgIHRoaXMubWVzc2FnZXMgPSB0aGlzLm1lc3NhZ2VzICsgXCIgY2FsbGVkIFwiO1xuICAgICAgLy9sZXQgcmVzcG9uc2UgPSBhd2FpdCBhcGkuZ2V0KGAvdXNlcnMvJHt0aGlzLnVzZXJuYW1lfS9tZXNzYWdlL2AsIHsnaGVhZGVycyc6IHsgJ0F1dGhvcml6YXRpb24nOiAnSldUIC4uLicgfX0pO1xuICAgICAgLy90aGlzLm1lc3NhZ2VzID0gcmVzcG9uc2UuZGF0YTtcbiAgICB9XG4gIH0sXG59XG48L3NjcmlwdD4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7XG4gICAgXCJ2dWVcIjogXCJodHRwczovL3VucGtnLmNvbS9AdnVlL3J1bnRpbWUtZG9tQDMuMi4zNi9kaXN0L3J1bnRpbWUtZG9tLmVzbS1icm93c2VyLmpzXCIsXG4gICAgXCJ2dWUvc2VydmVyLXJlbmRlcmVyXCI6IFwiaHR0cHM6Ly91bnBrZy5jb20vQHZ1ZS9zZXJ2ZXItcmVuZGVyZXJAMy4yLjM2L2Rpc3Qvc2VydmVyLXJlbmRlcmVyLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSJ9" rel="nofollow noreferrer"></a></p> </answer> <answer tick="false" vote="0"> <p>为什么不使用观察者? <a href="https://vuejs.org/guide/essentials/watchers.html#basic-example" rel="nofollow noreferrer">Vue 文档</a></p> <p>您可以在观察者的回调中使用异步函数。</p> </answer> </body></html>

回答 0 投票 0

如何在Vue 2中为数字设置2位固定小数位

我正在使用 v-model.number 绑定数据属性,这是代码片段 新的Vue({ 埃尔:“#app”, 数据: { 条目:[{ 文本:“评分 1”, 比率:1.7 }, { 文字:...

回答 1 投票 0

Vue 2 中如何让组件在 props 改变后重新渲染?

我的组件很简单: {{btnmsg}} 从“chico”导入 {Btn} </desc> <question vote="12"> <p>我的组件很简单:</p> <pre><code>&lt;template&gt; &lt;btn :color=&#34;color&#34; @click=&#34;toggleColor&#34;&gt;{{btnmsg}}&lt;/btn&gt; &lt;/template&gt; &lt;script&gt; import { Btn } from &#39;chico&#39; export default { name: &#39;AButton&#39;, components: { Btn }, data() { return { btnmsg: &#39;Legia pany&#39;, colors: [ &#39;blue&#39;, &#39;black&#39;, &#39;green&#39;, &#39;orange&#39;, &#39;teal&#39;, &#39;cyan&#39;, &#39;yellow&#39;, &#39;white&#39; ], color: &#39;red&#39; } }, methods: { toggleColor() { this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))]; } } } &lt;/script&gt; </code></pre> <p>ChicoFamily 的 <pre><code>&lt;Btn&gt;</code></pre> 是这样的:</p> <pre><code>&lt;template&gt; &lt;button :is=&#34;tag&#34; :class=&#34;[className, {&#39;active&#39;: active}]&#34; :type=&#34;type&#34; :role=&#34;role&#34;&gt; &lt;slot&gt;&lt;/slot&gt; &lt;/button&gt; &lt;/template&gt; &lt;script&gt; import classNames from &#39;classnames&#39;; export default { props: { tag: { type: String, default: &#34;button&#34; }, color: { type: String, default: &#34;default&#34; }, //...it takes a lot of props... }, data() { return { className: classNames( this.floating ? &#39;btn-floating&#39; : &#39;btn&#39;, this.outline ? &#39;btn-outline-&#39; + this.outline : this.flat ? &#39;btn-flat&#39; : this.transparent ? &#39;&#39; : &#39;btn-&#39; + this.color, //...classes derived from these props... ), }; } } &lt;/script&gt; </code></pre> <p>这是一个按钮,单击时应该更改其颜色。单击它确实会更改传递的道具,但不会以新颜色重新渲染按钮。</p> <p>为什么传递不同的 prop 不会重新渲染按钮?</p> <p> <pre><code>&lt;Btn&gt;</code></pre> 的颜色取自从 prop 派生的 Bootstrap 类。难道 Btn 获得了正确的道具,但 <pre><code>className</code></pre> 机制却没有跟上?</p> </question> <answer tick="false" vote="9"> <p>在组件上设置 :key 是强制 Vue 重新渲染组件的最佳方式。如果需要组件重新渲染,只需修改 key 的值,Vue 就会重新渲染。</p> </answer> <answer tick="true" vote="6"> <p>这不是重新渲染问题——当 prop 改变时,组件确实会重新渲染。问题是重新渲染并没有什么好处,因为您将颜色设置为 <em><code>data</code></em> 中的 <pre>初始值</pre>,而不是作为数据更改时重新评估的 <pre><code>computed</code></pre> 属性。</p> <p>按照您的方式,创建实例时将设置 <pre><code>className</code></pre> 一次,并且不会再次设置。</p> <p>为了使 <pre><code>className</code></pre> 在每次更改传入的道具之一时重新评估,您必须从中创建一个 <pre><code>computed</code></pre> 属性,如下所示:</p> <p>Btn 组件:</p> <pre><code>export default { props: { [...] }, computed: { className() { return classNames( this.floating ? &#39;btn-floating&#39; : &#39;btn&#39;, this.outline ? &#39;btn-outline-&#39; + this.outline : this.flat ? &#39;btn-flat&#39; : this.transparent ? &#39;&#39; : &#39;btn-&#39; + this.color ); }, }, } </code></pre> </answer> <answer tick="false" vote="0"> <p>按照您的方式,类名将在创建实例时设置一次,并且不会再设置一次。</p> <p>您应该使用计算作为 className </p> </answer> </body></html>

回答 0 投票 0

即使分配给同一个 newVal 也如何触发观察者

我正在使用 vue3 和 options api 如以下 stackbiltz 链接所示 我有一个子组件,其中包含一个按钮,单击该按钮时,应调用刷新方法。刷新(...

回答 1 投票 0

为什么vue2中$emit和asnyc的行为与普通函数不一样?

为了方便重现,我使用openpen来演示。 函数 foo() { 返回新的 Promise(解决 => { setTimeout(解决, 3000); }); } Vue.component('孩子', { 模板:' 为了方便重现,我使用openpen来演示。 function foo() { return new Promise(resolve => { setTimeout(resolve, 3000); }); } Vue.component('child', { template: '<div @click="handleClick">Click</div>', methods: { async handleClick() { console.log(1); const a = await this.$emit('abc'); console.log(2); } } }); //Root Instance new Vue({ el: '#app', template: '<child @abc="handleAbc" />', data: {}, methods: { async handleAbc() { console.log(3); await foo(); console.log(4); } } }) 如果我单击 div,结果是 1 3 2 4。 function foo() { return new Promise((resolve) => { setTimeout(resolve, 3000); }); } async function foo1() { console.log(3); await foo();`abc` console.log(4); } async function foo2() { console.log(1); await foo1(); console.log(2); } foo2(); 如果我使用普通函数,结果是 1 3 4 2。 有人可以解释一下结果不一样的原因吗 $emit 不返回 Promise,在其前面加上 await 表示在处理所有排队的操作后继续。 功能上,与此相同(数字按打印顺序排列): async function action(){ console.log(1) await emit() // <--- run emit and put in queue console.log(5) } function emit(){ console.log(2) handler() // <--- regular function call, continues when handler() returns console.log(4) } async function handler(){ console.log(3) await new Promise(setTimeout) // <--- return Promise, put in queue console.log(6) } action() 请注意,排队的项目是按顺序处理的,因此 action() 将在 handler() 之前继续。 在第二个示例中,等待的函数确实返回一个 Promise,当 Promise 解析时,执行将继续。当您将 async/await 替换为 .then()(按打印顺序排列的数字)时,顺序就会变得明显: function action(){ console.log(1) return handler().then(() => { console.log(4) }) } function handler(){ console.log(2) return Promise.resolve().then(() => { console.log(3) }) } action()

回答 1 投票 0

如何修复安装vue-cli时的错误

当我运行命令 npm install -g vue-cli 时,我收到以下警告,显然我没有错误 但执行时 vue 初始化 webpack 我的项目 或者 vue--版本 弹出这个

回答 3 投票 0

“类型错误:无法读取未定义的属性‘get’”,Axios,Vue.JS

当我尝试使用 axios 从 api 访问 get 请求时,我从 Vue 收到这个奇怪的错误, 我收到“TypeError:无法读取未定义的属性‘get’” &... 当我尝试使用 axios 从 api 访问 get 请求时,我从 Vue 收到这个奇怪的错误, 我收到“TypeError:无法读取未定义的属性‘get’” <template> <div class="home"> <h1>{{ msg }}</h1> <p>Welcome to your new single-page application, built with <a href="https://vuejs.org" target="_blank">Vue.js</a>.</p> </div> </template> <script> var Vue = require('vue'); // import axios from "axios"; window.axios=require('axios'); export default { name: 'Home', props: { msg: String }, component: { }, mounted: function () { alert('Hi '); this.axios.get('https://api.github.com/users') .then(value => { alert(value); }); } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style> 在您的情况下,this并不引用window。更好的方法是在组件中导入 axios: import axios from 'axios'; 更高效的方法是在main.js文件中全局设置一次: Vue.prototype.$http = axios 并在任何你想要的地方使用它 this.$http 我遇到了同样的问题,只需添加 type="module" 即可解决我的问题。谢谢你

回答 2 投票 0

如何在Vue.js中设置optgroup选择标签?

我正在尝试在 Vue 中创建一个选择组。 小提琴:https://jsfiddle.net/Tropicalista/vwjxc5dq/ 我试过这个: 我正在尝试在 Vue 中创建一个选择组。 小提琴:https://jsfiddle.net/Tropicalista/vwjxc5dq/ 我试过这个: <optgroup v-for="option in options" v-bind:label="option"> <option v-for="sub in option" v-bind:value="option.value"> {{ sub.text }} </option> </optgroup> 我的数据: data: { selected: 'A', options: { First: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' } ], Second: [ { text: 'Three', value: 'C' } ] } } 您将 label 属性绑定到 option,这是一个数组。您想要的是绑定到对象的键。 您可以通过在 v-for 指令中指定第二个参数来获取每个选项的键: <optgroup v-for="(option, key) in options" v-bind:label="key"> 我还将您的 options 属性重命名为 optionGroups 以避免进一步混淆: data: { selected: 'A', optionGroups: { First: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' } ], Second: [ { text: 'Three', value: 'C' } ] } } 这样,模板就会更有意义: <optgroup v-for="(group, name) in optionGroups" :label="name"> <option v-for="option in group" :value="option.value"> {{ option.text }} </option> </optgroup> 根据上面的回答。我通过在 optgroup 标签中添加标签来改进 optgroup 标签 <optgroup v-for="(group, name) in optionGroups" :key="name" :label="`${name}`"> <option v-for="option in group" :key="option.value"> {{ option.text }} </option> </optgroup> 这是Vue3组合API版本: <script setup> import { ref } from 'vue' const options = { First: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' } ], Second: [ { text: 'Three', value: 'C' } ] } const selected = ref('A'); </script> <template> <select v-model="selected"> <optgroup v-for="(group, groupName) in options" :label="groupName" :key="groupName"> <option v-for="item in group" :value="item.value" :key="item.value"> {{ item.text }} </option> </optgroup> </select> <p>Selected value: <span>{{ selected }}</span></p> </template>

回答 3 投票 0

Vue 2 中的动态组件和条件渲染

最近我在使用 Vue 2 玩动态组件。 假设我们有两个必须有条件渲染的组件 SignIn 和 SignOut。 从 '~/components/SignIn.vue 导入 SignIn 导入...

回答 1 投票 0

弹出菜单 打开光标

帮我做一个弹出菜单。我做不到。我没有时间将鼠标悬停在菜单上,它就消失了。我已经尝试了一切,光标消失了。悬停时它应该打开和关闭

回答 1 投票 0

Cypress VUE 组件测试,组件访问方法

我正在努力向 cypress 中的组件添加测试,我想知道是否可以访问测试组件的功能或数据。

回答 1 投票 0

将 Vuetify 2 添加到 vite 项目

我的团队使用基于类的组件和打字稿在 Vue 2 中开发应用程序。 现在,我们想迁移到 Vite - 因为它具有所有优势。 我已遵循本指南(我可以...

回答 4 投票 0

在 vue 应用程序中添加新值时从下拉列表中删除值

我正在尝试在我的 vue 项目中创建日期过滤器。所以对于这一点,观点是: 我正在尝试在我的 vue 项目中创建日期过滤器。所以对于这一点,观点是: <div class="dropdown-item d-flex flex-column"> <div v-for="(filter, index) in dateFilters" :key="index" class="dropdown-item-inner" > <div class="mb-2 d-flex"> <select v-model="filter.dateType" class="form-select mr-1"> <option value="startDate">Start Date</option> <option value="endDate">End Date</option> </select> <select v-model="filter.filterType" class="form-select mr-1"> <option v-for="option in dateOptions" :value="option.value" :key="option.value" > {{ option.label }} </option> </select> <input type="date" v-model="filter.date" class="form-control" /> <button :disabled="dateFilters.length < 2" class="button is-transparent m-0 d-flex horizontal-center vertical-center" @click="clearDateFilterRule(index)" > <i class="fas fa-trash mr-2"></i> </button> </div> </div> <div class="date-filter-buttons"> <button v-if="dateFilters.length < 8" class="button is-transparent m-0 d-flex horizontal-center vertical-center" @click="addDateFilter" > <i class="fas fa-plus mr-2"></i>Add Rule </button> <button type="button" class="button is-transparent m-0" @click="clearDateFilters" > Clear </button> </div> </div> 实际查看如下: 所以我有 dateOptions 和 dateFilters: data() { return { dateFilters: [ { dateType: "startDate", filterType: "eq", date: "", }, ], dateOptions: [ {value: "eq", label: "Date is"}, {value: "not", label: "Date is not"}, {value: "lte", label: "Date is before"}, {value: "gte", label: "Date is after"}, ], }; }, 这是我的添加事件: addDateFilter() { const selectedValue = this.dateFilters.map((filter) => filter.filterType); this.dateOptions = this.dateOptions.filter(option => !selectedValue.includes(option.value)); if (this.dateOptions.length > 0) { this.dateFilters.push({ dateType: "startDate", filterType: this.dateOptions[0].value, date: "", }); } }, 所以我的目标是当我单击添加规则按钮(即 addDateFilter 事件)时,我将您在图片中看到的同一行添加到 dateFilters 中。但我想从中删除 dateOptions 下拉菜单(日期是)。例如,如果在第一行中使用日期并在中间下拉列表的下一行中推送日期过滤器,则应删除日期。这一部分,我是成功的。但问题是,当我将行推入 dateFilters 时,第一行的值也消失了。所以我有这样的看法: 如何解决? 您的 addDateFilter 的问题在于它没有反应性。当下拉列表更改时,其他下拉列表需要对这些更改做出反应,即在一个下拉列表中选择不同的选项应该使原始选项在所有下拉列表中可用。 我将首先集中精力解释它,假设“开始日期”作为唯一可用的日期类型,因为这就是我首先解决的方法(或者如果您只想跳到考虑“开始日期”的最终解决方案和“结束日期”,向下滚动)。 仅限“开始日期” 使用计算属性,我们可以反应性地跟踪下拉列表中所有当前选定和未选定的日期选项。 computed: { // getter for all selected options selectedOptions() { return this.dateFilters.map(df => df.filterType) }, // getter for all unselected options unselectedOptions() { return this.dateOptions.filter(o => !this.selectedOptions.includes(o.value)) } }, addDateFilter 方法可以简化为仅将新过滤器推送到 dateFilters 数组 addDateFilter() { this.dateFilters.push({ dateType: 'startDate', filterType: this.unselectedOptions[0].value, date: '' }) }, 每个下拉列表应列出所有未选择的选项+当前选择的选项。我将在一个新方法中返回此有效选项列表,该方法将所选选项作为参数。然后可以在 v-for 中使用此方法来返回每个下拉列表的所有有效选项。 // return unused options with currently selected option validDateOptions(val) { const selected = this.dateOptions.find(o => o.value === val) return [ ...this.unselectedOptions, selected] }, <select v-model="filter.filterType" class="form-select mr-1"> <option v-for="option in validDateOptions(filter.filterType)" :key="option.value" :value="option.value" > {{ option.label }} </option> </select> Vue SFC Playground 示例 允许“开始日期”和“结束日期” 由于“开始日期”和“结束日期”都可以具有相同的选定选项之一,因此我们必须在上述方法中添加 dateType 作为附加过滤器和参数。唯一的问题是我们应该避免使用 computed 属性的参数,因此这些实际上需要更改为方法: methods: { // getter for all selected options selectedOptions(type) { return this.dateFilters.filter(df => df.dateType === type).map(df => df.filterType) }, // getter for all unselected options unselectedOptions(type) { return this.dateOptions.filter(o => !this.selectedOptions(type).includes(o.value)) }, addDateFilter 默认情况下会添加一个新的“startDate”过滤器,但如果已添加所有这些过滤器,则需要添加一个“endDate”过滤器。 addDateFilter() { let type = 'startDate' if (this.unselectedOptions(type).length === 0) { type = 'endDate' } this.dateFilters.push({ dateType: type, filterType: this.unselectedOptions(type)[0].value, date: '' }) }, 新的validDateOptions现在还需要一个额外的参数: // return unused options with currently selected option validDateOptions(type, val) { const selected = this.dateOptions.find(o => o.value === val) return [ ...this.unselectedOptions(type), selected] }, 模板代码中提供: <select v-model="filter.filterType" class="form-select mr-1"> <option v-for="option in validDateOptions(filter.dateType, filter.filterType)" :key="option.value" :value="option.value" > {{ option.label }} </option> </select> Vue Playground 示例 未解决的问题 上面的代码没有考虑如果有两个具有相同选项但不同类型的下拉菜单并且您将它们更改为相同类型会发生什么,例如 开始日期 |日期是 |月/日/年 结束日期 |日期是 |月/日/年 更改为: 开始日期 |日期是 |月/日/年 开始日期 |日期是 |月/日/年 这将是无效的,但尚不清楚应如何处理。您需要使用一个方法向 dateType 下拉列表添加一个事件侦听器,该方法可以决定是否忽略更改、显示错误、交换日期类型值或执行其他操作。由于这不是您最初问题的一部分,并且有多种方法可以处理它,因此我将其留给您。

回答 1 投票 0


为什么webpack包含依赖的node_modules?

我在同一目录中有两个模块,均由 lerna js 管理。其中之一是其他模块包含的库。它们都是在 webpack 库创作之后由 webpack 打包的。 乙...

回答 3 投票 0

Vuejs 3 如何以编程方式获取组件实例属性

我有一个用 vue 2 编写的函数,我需要修改 vue 3。有一个名为 Modal 的组件,它是一个带有很多道具和选项的确认框。在代码库中它调用 showPrompt

回答 1 投票 0

在 Nuxt 2 上安装 vueuse 当您尝试 npm run dev 时会出现错误“command not found”

他们的指南概述了这些步骤 第 1 步:安装 vueuse core 和 vueuse nuxt 包 npm i -D u/vueuse/nuxt u/vueuse/core 步骤2:修改nuxt.config.js,在buildModules '@vueus...

回答 1 投票 0

Vue2 验证“this.$v.userData.lastName.$error”导致“超出最大调用堆栈大小”

我在使用 Vuelidate 的 Vue2 项目中遇到问题。我需要实现数据验证,理论上“this.$v.userData.lastName.$error”应该返回 true 或 false,但结果我得到.. .

回答 1 投票 0

注销弹出窗口不起作用。我怎样才能在 MSAL 中制作一个

我正在开发一个项目,并试图找出如何在我的网页上制作注销按钮。它使用的是 Vue2,我的脚本现在看起来像这样。 从“@azure/msal-browser...导入*作为msal...

回答 1 投票 0

Vuejs节流搜索输入

我正在尝试实现搜索,并有一个输入,用户输入搜索词,并且每 1.5 秒我希望它到达端点以获取搜索结果。现在我有一个输入...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.