vuejs2 相关问题

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

我正在使用 vue-meta: ^2.4.0 来填充我的 Nuxt 站点的。除了添加非标准 HTML 元素之外，一切都按预期工作。在这种情况下，我想要我正在使用 vue-meta: ^2.4.0 填充我的 Nuxt 网站的 <head>。除了添加非标准 HTML 元素之外，一切都按预期工作。在这种情况下，我希望 <nonstandard href="${process.env.SOME_VALUE_FROM_ENV}"> 位于 <head> 中，但它永远不会出现，即使我用一个简单的值对其进行硬编码。不支持非标准元素吗？我的nuxt.config.js如下： module.exports = { head: { // works htmlAttrs: { lang: 'en' }, // works link: [ { rel: 'shortcut icon', href: '/images/favicon.ico', type: 'image/ico' } ], // works meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1.0' }, { 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' } ], // NONE OF THESE APPROACHES WORK nonstandard: [ { href: '${process.env.SOME_VALUE_FROM_ENV}' }, { innerHTML: `href="${process.env.SOME_VALUE_FROM_ENV}"` } ], innerHTML: `<nonstandard href="${process.env.SOME_VALUE_FROM_ENV}" />`, // works script: [ { innerHTML: ` (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','xxxxxxxxxxx'); ` } ], // works noscript: [ { innerHTML: ` <iframe src="https://www.googletagmanager.com/ns.html?id=xxxxxxxxxxx" height="0" width="0" style="display:none;visibility:hidden"></iframe> `, pbody: true } ], __dangerouslyDisableSanitizers: ['script', 'noscript', 'nonstandard'], } } 按照 @DengSihan 的建议，我能够通过自定义 app.html 填充该值，该值是我作为 nuxt.config.js 文件的同级文件创建的。 <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} <nonstandard href="{{ ENV.SOME_VALUE_FROM_ENV }}"> </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html> 在我的nuxt.config.js： module.exports = { env: { SOME_VALUE_FROM_ENV: process.env.SOME_VALUE_FROM_ENV } } 由此我们可以得出结论，vue-meta无法用非标准元素填充头部，必须使用自定义的app.html来代替。不知道为什么这个问题被否决了。这是一个独特的案例。

vuejs2 nuxt.js vue-meta

回答 1 投票 0

如何在我现有的 Vue2 项目中清楚且单独地使用 vuetify 中的组件

我有一个项目，致力于 Laravel 和 Vue2。我想在项目的特定部分使用 Vue 插件 Vuetify 中的一些材质组件。首先，我在我的

css vuejs2 stylesheet vue-component vuetify.js

回答 2 投票 0

在 HTML5 中找不到此媒体类型 = video/mpeg 的兼容源

所以我尝试使用 vue-video-player 在我的模态上制作视频播放器，所以下面是我的 ModalDetailMediaVideo.vue 的模板代码所以我尝试使用 vue-video-player 在我的模态上制作视频播放器，所以下面是我的 ModalDetailMediaVideo.vue 的模板代码 <template> <div @keydown.esc="modalClosed()" @click="modalClosed()" class="modal fade" id="modalMediaVideo" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg justify-content-center"> <div class="layout-video"> <video-player ref="videoPlayer" class="vjs-custom-skin vjs-layout-small" :options="playerOptions" :aspectRatio="'9:16'" @play="onPlayerPlay($event)" @ready="onPlayerReady($event)" @pause="onPlayerPause($event)" > </video-player> </div> </div> </div> <script> import { videoPlayer } from 'vue-video-player'; export default { props: { videoSource: { type: Array, default: function() { return []; } } }, components: { videoPlayer }, data () { return { playerOptions: { mute: true, controls: true, controlBar: { timeDivider: false, durationDisplay: false }, sources: this.videoSource }, isPlaying: false } }, computed: { player () { return this.$refs.videoPlayer.player } }, methods: { onPlayerPlay (player) { console.log('player play!', player) this.isPlaying = true; }, onPlayerReady (player) { console.log('player ready!', player) this.player.play() }, onPlayerPause (player) { this.player.pause(); this.isPlaying = false; }, modalClosed(player){ if(this.isPlaying == true){ this.player.pause(); } } }, watch: { videoSource: function(){ console.log(this.videoSource, "INSIDE WATCHER") this.playerOptions.sources = this.videoSource; this.playerOptions.sources[0].type = 'video/mp4'; this.isPlaying = false; } } } </script> props videoSource 数组是 videoSource = { src: '', type: '' } 如您所见，如果 videoSource 属性以 mp4 / mov 格式传递 src 值，这些代码可以正常工作，但如果 videoSource 的 src 和类型是 mpeg，则这些代码将不起作用。我也尝试过这个方法但是没用。任何人请帮我提供有关在 HTML5 中播放 mpeg 格式视频的库或插件的参考信息。提前谢谢大家，爱你们。您可以尝试的一件事是将 mpeg 视频转换为 HTML5 更广泛支持的其他格式，例如 mp4、webm 或 ogg。您可以使用商业或开源工具来执行此操作，然后将转换后的视频上传到您的网络服务器。然后，您可以在标签内使用多个标签来提供同一视频的不同格式供浏览器选择。例如，你可以这样做： <video-player ref="videoPlayer" class="vjs-custom-skin vjs-layout-small" :options="playerOptions" :aspectRatio="'9:16'" @play="onPlayerPlay($event)" @ready="onPlayerReady($event)" @pause="onPlayerPause($event)" > <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogg" type="video/ogg"> </video-player> 这样，您可以确保您的视频播放器可以在任何支持 HTML5 的浏览器中播放视频。您可以通过以下链接了解有关 HTML5 视频格式以及如何将它们嵌入到 HTML 中的更多信息：HTML 视频 - W3Schools 和 HTML 视频 - 如何使用 HTML 5 视频标签嵌入视频播放器。您可以尝试的另一件事是使用可以在 HTML5 中播放 mpeg 视频的 JavaScript 库或插件。有一些库可以执行此操作，例如 MediaElement.js、Video.js 或 Plyr。这些库可以提供自定义视频播放器，可以处理不同的视频格式和编解码器，并添加字幕、字幕、播放列表等功能。您可以使用 npm 或 CDN 安装这些库，然后在 Vue 组件中使用它们。例如，你可以这样做： <template> <div class="layout-video"> <video id="video" class="video-js vjs-default-skin vjs-layout-small" controls preload="auto" width="640" height="360"> <source src="video.mpeg" type="video/mpeg"> </video> </div> </template> <script> import videojs from 'video.js'; export default { mounted() { // initialize the video player this.player = videojs(this.$refs.video, this.options, function onPlayerReady() { console.log('onPlayerReady', this); }); }, beforeDestroy() { // destroy the video player if (this.player) { this.player.dispose(); } }, data() { return { player: null, options: { // video player options } }; } }; </script> 这样，您就可以使用库或插件来播放 HTML5 中的 mpeg 视频。您可以通过以下链接了解有关这些库以及如何在 Vue 组件中使用它们的更多信息：[MediaElement.js]、[Video.js] 和 [Plyr]。我希望这可以帮助您了解如何使用 vue-video-player 在 HTML5 中播放 mpeg 视频。

javascript html vuejs2 html5-video video-player

回答 2 投票 0

Vuejs：如何向作为 props 传递的数组添加其他项目？

我有一个要传递到表单中的对象位置，以便正确重新填充表单字段。我的父模板如下所示：我的...

vue.js vuejs2 vuelidate

回答 1 投票 0

如何在Vue.js模板中定义临时变量

这是我当前的模板：这是我当前的模板： <a-droppable v-for="n in curSize" :key="n - 1" :style="{width: `${99.99 / rowLenMap[orderList[n - 1]]}%`, order: orderList[n - 1]}"> <a-draggable :class="{thin: rowLenMap[orderList[n - 1]] > 10}"> <some-inner-element>{{rowLenMap[orderList[n - 1]]}}</some-inner-element> </a-draggable> </a-droppable> 问题是我要多次写rowLenMap[orderList[n - 1]]，而且恐怕vue.js引擎也会计算多次。我想要的是这样的： <a-droppable v-for="n in curSize" :key="n - 1" v-define="rowLenMap[orderList[n - 1]] as rowLen" :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}"> <a-draggable :class="{thin: rowLen > 10}"> <some-inner-element>{{rowLen}}</some-inner-element> </a-draggable> </a-droppable> 我觉得技术上实现起来并不困难，因为用v-for="rowLen in [rowLenMap[orderList[n - 1]]]"之类的东西就可以笨拙地解决。那么有没有简洁且官方的解决方案呢？我找到了一种非常简单（几乎神奇）的方法来实现这一目标，它所做的只是定义一个内联（局部）变量，其中包含您要多次使用的值： <li v-for="id in users" :key="id" :set="user = getUser(id)"> <img :src="user.avatar" /> {{ user.name }} {{ user.homepage }} </li> 注意：set并不是Vuejs中的特殊道具，它只是用作变量定义的占位符。 Source：https://dev.to/pbastowski/comment/7fc9 CodePen：https://codepen.io/mmghv/pen/dBqGjM 更新：基于@vir us的评论这不适用于事件，例如 @click="showUser(user)" 不会传递正确的用户，而是始终是最后评估的用户，这是因为 user 临时变量将在每个循环中重新使用和替换循环。所以这个解决方案仅适用于模板渲染，因为如果组件需要重新渲染，它将再次重新评估变量。但是如果你真的需要将它与事件一起使用（尽管不建议），你需要定义一个外部数组来同时保存多个变量： <ul :set="tmpUsers = []"> <li v-for="(id, i) in users" :key="id" :set="tmpUsers[i] = getUser(id)" @click="showUser(tmpUsers[i])"> <img :src="tmpUsers[i].avatar" /> {{ tmpUsers[i].name }} {{ tmpUsers[i].homepage }} </li> </ul> https://codepen.io/mmghv/pen/zYvbPKv 学分：@vir us 虽然在这里基本上复制 users 数组没有意义，但这在其他需要调用昂贵的函数来获取数据的情况下可能很方便，但我认为你最好使用 computed然后构建数组的属性。今天我需要这个并使用了 <template> 标签和 v-for 像这样我拿了这个代码并且 <ul> <li v-for="key in keys" v-if="complexComputation(key) && complexComputation(key).isAuthorized"> {{complexComputation(key).name}} </li> </ul> 改成这样了 <ul> <template v-for="key in keys"> <li v-for="complexObject in [complexComputation(key)]" v-if="complexObject && complexObject.isAuthorized"> {{complexObject.name}} </li> </template> </ul> 它成功了，我很惊喜，因为我不知道这是可能的根据您的模板判断，您可能最好使用计算属性，如已接受的答案中所建议的那样。但是，由于问题标题有点宽泛（并且在 Google 上“Vue 模板中的变量”的排名相当高），我将尝试提供更通用的答案。特别是如果您不需要转换数组中的每个项目，则计算属性可能有点浪费。子组件也可能有些过大，特别是如果它真的很小的话（这将使其成为 20% 的模板、20% 的逻辑和 60% 的 props 定义样板）。我喜欢使用的一个非常简单的方法是一个小的辅助组件（我们称之为<Pass>）： const Pass = { render() { return this.$scopedSlots.default(this.$attrs) } } 现在我们可以像这样编写你的组件： <Pass v-for="n in curSize" :key="n - 1" :rowLen="rowLenMap[orderList[n - 1]]" v-slot="{ rowLen }"> <a-droppable :style="{width: `${99.99 / rowLen}%`, order: orderList[n - 1]}"> <a-draggable :class="{thin: rowLen > 10}"> <some-inner-element>{{rowLen}}</some-inner-element> </a-draggable> </a-droppable> </Pass> <Pass> 通过创建作用域插槽来工作。在 Vue.js 文档上阅读有关作用域插槽的更多信息，或者在我就该主题撰写的 dev.to 文章中了解有关上述方法的更多信息。附录：Vue 3 Vue 3 对插槽的处理方法略有不同。首先，<Pass>组件源码需要这样调整： const Pass = { render() { return this.$slots.default(this.$attrs) } } 刚刚使用 vue3 进行了测试并且可以工作，我认为它可以普遍使用 {{ (somevariable = 'asdf', null) }} <span v-if="somevariable=='asdf'">Yey</span> <span v-else>Ney</span> 设置变量时它不输出任何内容。强制：打开“(” 设置变量关闭“, null)” 这似乎是子组件的完美用例。您可以简单地将复杂的计算值作为属性传递给组件。 https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props 这个怎么样： <div id="app"> <div v-for="( id, index, user=getUser(id) ) in users" :key="id" > {{ user.name }}, {{ user.age }} years old <span @click="show(user)">| Click to Show {{user.name}} |</span> </div> </div> CodePen：https://codepen.io/Vladimir-Miloevi/pen/xxJZKKx 在某些情况下，v-define或v-set确实有助于防止重复执行某些操作（尽管计算属性有时更好）。您可以将 v-for 与仅具有该值的数组一起使用。 <template v-for="user in [getUser(id)]"> Hello {{ user.name }}! </template> 与假设的v-set具有相同的效果： <template v-set="user=getUser(id)"> Hello {{ user.name }}! </template> <template> <div> <div v-for="item in itemsList" :key="item.id"> {{ item.name }} <input v-model="item.description" type="text" /> <button type="button" @click="exampleClick(item.id, item.description)"> Click </button> </div> </div> </template> <script> export default { data() { return { items: [ { id: 1, name: 'Name1', }, { id: 2, name: 'Name2', }, ], } }, computed: { itemsList() { return this.items.map((item) => { return Object.assign(item, { description: '' }) }) }, }, methods: { exampleClick(id, description) { alert(JSON.stringify({ id, description })) }, }, } </script> 借用Mohamed的回答中的一个例子。为了让它在 Vue3 中与 TypeScript 一起工作，我使用 Array.prototype.map() 在调用该函数的地方创建新对象。 const app = new Vue({ el: '#app', data: { users: [1, 2, 3, 4], usersData: { 1: {name: 'Mohamed', age: 29}, 2: {name: 'Ahmed', age: 27}, 3: {name: 'Zizo', age: 32}, 4: {name: 'John', age: 13}, } }, methods: { getUser(id) { return this.usersData[id]; }, }, }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="{ id, user } in users.map((id) => ({ id: id, user: getUser(id) }))" :key="id">{{ user.name }}, {{ user.age }} years old</div> </div> curSize 是一个数组。您的临时值包含相应的隐含数组sizedOrderList = curSize.map(n => orderList[n-1])。如果你将其定义为计算的，你的 HTML 就会变成 <a-droppable v-for="n, index in sizedOrderList" :key="curSize[index]" :style="{width: `${99.99 / rowLenMap[n]}%`, order: n}"> <a-draggable :class="{thin: rowLenMap[n] > 10}"> <some-inner-element>{{rowLenMap[n]}}</some-inner-element> </a-draggable> </a-droppable>

javascript vue.js vuejs2

回答 10 投票 0

vue路由器无法删除查询

我尝试通过单击按钮删除查询参数。例如我的路线是http://localhost:8080/#/myroute?dialog=1。现在我单击一个按钮，该按钮应删除查询部分？dialog=1。我的点击

vue.js vuejs2 vue-router

回答 2 投票 0

静态生成的 Nuxt 2 站点和 Netlify 无服务器功能的 CORS 问题

我在尝试从 Netlify 上托管的静态生成的 Nuxt.js 站点向处理 Mailchim 的无服务器函数发出请求时遇到 CORS（跨源资源共享）问题...

vuejs2 cors nuxt.js serverless netlify

回答 1 投票 0

在 Vue 中实现简短的五星级评级系统

在任何给定时间，下面的代码都会显示五个连续的星星。它们是 star1.png（黄色）或 star0.png（黑色）。当用户将鼠标悬停在第三颗星、前三颗星上时......

javascript vuejs2

回答 1 投票 0

Javascript + Vue 问题：“无法读取 null 的属性‘值’”

下面我有一个输入，我尝试将其值分配给变量v。阅读类似帖子后我的理解是，当页面初始化时，输入的值为空，因此...

javascript vuejs2

回答 1 投票 0

如何引用 v-for 中迭代的项？

在下面的代码中，我使用 v-for 多次显示图像 n=0,1,2，并且我希望每当将此类图像悬停在该图像上时就会出现与该图像对应的 n 数字的警报。的c...

javascript vuejs2

回答 1 投票 0

从 vue 导入 {ref} 时出错？

我是vue js的新手，通过vue-mastery教程学习，我通过查看教程编写了代码我的代码是容量：{{容量}} ...

javascript vue.js vuejs2

回答 2 投票 0

如何解决从 vuejs2 组件进行 fetch 调用时出现的 405（方法不允许）错误？

我有一个使用 vuejs 2 的 laravel 7.3 项目。我在 vuejs2 组件中有一个 fetch 调用，它在 WSL 开发服务器上运行良好。但是当我在本地服务器上部署项目时，我得到了 405（

vuejs2 laravel-7 http-status-code-405

回答 1 投票 0

Vue Js 2 提供的无法在 Parent 中更新

我正在尝试使用 Vue.js 2.7 中的提供函数，并且我想通过异步函数更新其中一个 props，但它不会更新子项中的注入家长.vue ... 我正在尝试使用 Vue.js 2.7 中的提供函数，并且我想通过异步函数更新其中一个 props，但它不会更新子项中的注入 Parent.vue <template> <Child /> </template> <script> export default { provide(){ return { typesTabs: null, instanceTypeToAdd: null, buttonInstanceTypeToAdd: null, updateProvidedPropValue: this.updateProvidedPropValue } }, mounted(){ this.fetchInstances() }, methods: { updateProvidedPropValue(propName, value) { this[propName] = value }, async fetchInstances() { axios.get().then(() => { this.typesTabs = JSON.parse(JSON.stringify(res.data.expense_income_type_consts)) }) } } } </script> Child.vue <template> <div v-for="tab in typesTabs" @click="updateProvidedPropValue('instanceTypeToAdd', tab)" > {{ tab.name }} </div> </template> <script> export default { inject: ['typesTabs', 'instanceTypeToAdd', 'updateProvidedPropValue'] } </script> 虽然 updateProvidedPropValue 工作正常，如果我对 typesTabs 对象进行硬编码，但当它异步加载时，typesTabs 不包含任何内容，因此我无法更改 instanceTypeToAdd。我尝试在 axios 请求之后立即在 Parent.vue 中使用 console.log(this.typesTabs) ，它正确地填充了 prop (typesTabs)，但没有更新以在子项中显示内容。来自文档。注意：provide 和 inject 绑定不具有反应性。这是故意的。但是，如果您传递一个观察到的对象，该对象上的属性仍然保持反应状态。您可以将数据和计算属性一起使用作为解决方法 import { computed } from 'vue'; ... provide() { return { typesTabs: computed(() => this.tabs), instanceTypeToAdd: null, buttonInstanceTypeToAdd: null, updateProvidedPropValue: this.updateProvidedPropValue }; }, data() { return { tabs: [] }; }, axios.get().then(() => { this.tabs = JSON.parse(JSON.stringify(res.data.expense_income_type_consts)) })

javascript vue.js vuejs2 inject

回答 1 投票 0

在组件中异步计算？

我正在组件中找到异步计算方法的解决方案：目前，我的组件是： {{消息}} 导出默认值{ 计算...</desc> <question vote="51"> <p>我正在组件中找到异步计算方法的解决方案：</p> <p>目前，我的组件是：</p> <pre><code><div class="msg_content"> {{messages}} </div> <script> export default { computed: { messages: { get () { return api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }}) .then(response => response.data) } } }, } </script> </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/`, { 'headers': { 'Authorization': 'JWT ...' } }) .then(response => 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/`, {'headers': { 'Authorization': 'JWT ...' }}) .then(response => 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><template> <input v-model="username"> <div class="msg_content" :dummy="force_react"> {{messages}} </div> </template> <script> export default { data: function () { return { messages: "", username: "", }; }, 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's called every time that this.username updates console.log("Got called"); let response = await api.get(`/users/${this.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }}); this.messages = response.data; } }, } </script> </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>

javascript vue.js vuejs2 vue-component

回答 0 投票 0

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

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

javascript vuejs2

回答 1 投票 0

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

我的组件很简单： {{btnmsg}} 从“chico”导入 {Btn} </desc> <question vote="12"> <p>我的组件很简单：</p> <pre><code><template> <btn :color="color" @click="toggleColor">{{btnmsg}}</btn> </template> <script> import { Btn } from 'chico' export default { name: 'AButton', components: { Btn }, data() { return { btnmsg: 'Legia pany', colors: [ 'blue', 'black', 'green', 'orange', 'teal', 'cyan', 'yellow', 'white' ], color: 'red' } }, methods: { toggleColor() { this.color = this.colors[Math.floor(Math.random() * Math.floor(this.colors.length))]; } } } </script> </code></pre> <p>ChicoFamily 的 <pre><code><Btn></code></pre> 是这样的：</p> <pre><code><template> <button :is="tag" :class="[className, {'active': active}]" :type="type" :role="role"> <slot></slot> </button> </template> <script> import classNames from 'classnames'; export default { props: { tag: { type: String, default: "button" }, color: { type: String, default: "default" }, //...it takes a lot of props... }, data() { return { className: classNames( this.floating ? 'btn-floating' : 'btn', this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color, //...classes derived from these props... ), }; } } </script> </code></pre> <p>这是一个按钮，单击时应该更改其颜色。单击它确实会更改传递的道具，但不会以新颜色重新渲染按钮。</p> <p>为什么传递不同的 prop 不会重新渲染按钮？</p> <p> <pre><code><Btn></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 ? 'btn-floating' : 'btn', this.outline ? 'btn-outline-' + this.outline : this.flat ? 'btn-flat' : this.transparent ? '' : 'btn-' + this.color ); }, }, } </code></pre> </answer> <answer tick="false" vote="0"> <p>按照您的方式，类名将在创建实例时设置一次，并且不会再设置一次。</p> <p>您应该使用计算作为 className </p> </answer> </body></html>

vue.js vuejs2 vue-component vue-props

回答 0 投票 0

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

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

vue.js vuejs2 vuejs3 vue-component

回答 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()

vuejs2 emit

回答 1 投票 0

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

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

npm vuejs2 coffeescript vue-cli

回答 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>  <style scoped> </style> 在您的情况下，this并不引用window。更好的方法是在组件中导入 axios： import axios from 'axios'; 更高效的方法是在main.js文件中全局设置一次： Vue.prototype.$http = axios 并在任何你想要的地方使用它 this.$http 我遇到了同样的问题，只需添加 type="module" 即可解决我的问题。谢谢你

vue.js vuejs2 axios vue-component vuex

回答 2 投票 0

vuejs2 相关问题

最新问题