草庐IT

vue-component

全部标签

javascript - Vue 中的嵌套循环

我有一个通过vue传递的对象的对象,我这样做是为了运行:@{{question}}但是我收到这个错误:属性或方法“subjects”未在实例上定义,但在渲染期间被引用。确保在数据选项中声明响应式数据属性。(在根实例中找到)如何在vue中运行嵌套循环? 最佳答案 举个例子:varvm=newVue({el:'#app',data:{questions:[{subjects:['question1.1','question1.2']},{subjects:['question2.1','question2.2']}]}}){{subje

javascript - Vue.js 'v-bind:class' 不更新,即使模型更新

我有一个项目列表,我想对当前选定的项目应用一种样式。我也在使用Vuex来管理状态。我的列表组件:constList=Vue.component('list',{template:'0">'+''+'{{g.text}}'+''+''computed:{items:function(){returnthis.$store.state.items;}},methods:{selectItem:function(index){this.$store.commit('selectItem',index);}}});我的商店:conststore=newVuex.Store({state:{it

javascript - 使用 Vue.js 播放声音

如何使用Vue.js播放声音?似乎我不能只做常规的方式。importVuefrom'vue'importAppViewfrom'./components/App.vue'console.log('Playoutsideofvue')varaudio=newAudio('file.mp3')audio.play()newVue({el:'#root',mounted(){console.log('Willitplayhere??lol')varaudio=newAudio('file.mp3')audio.play()},render:h=>h(AppView)})正如它所说,音频未定义

javascript - 如何将动态 Prop 绑定(bind)到 VueJS 2 中的动态组件

我想知道如何迭代组件名称列表(来自对API服务器的AJAX调用)并将它们呈现为组件,并将相关属性传递给每个组件(即动态绑定(bind)它们的属性).到目前为止,我已经设法迭代表示组件的项目的JSON列表,并成功呈现这些组件。我现在想做的是使用v-bind绑定(bind)每个组件的属性。在下面的示例中,item-one组件将接收具有item1.jpg值的image属性;item-two组件不会收到任何属性。importItemOnefrom'../components/item-one'importItemTwofrom'../components/item-two'exportdefa

javascript - 在 vue 路由中匹配查询参数

有什么方法可以通过查询参数进行路由吗?我想匹配以下路由:site.com/?foo=123。我试过类似的东西{path:'/\?foo=[\d]*'}没有成功。 最佳答案 不幸的是,您无法匹配路由定义的path字符串中的查询参数。VueRouter使用path-to-regexp和itsdocumentation说:TheRegExpreturnedbypath-to-regexpisintendedforusewithpathnamesorhostnames.Itcannothandlethequerystringsorfragm

javascript - 如何将弹出框内的输入标签绑定(bind)到 Vue 模型

我在弹出内容中有一个input,如下所示:JSFiddleHTML:'>ClickMe!{{message}}这是JS:newVue({el:'#vue-app',data:{message:'IamaText'}});$(document).ready(function(){$('[data-toggle="popover"]').popover();});如您所见,data-content的输入绑定(bind)得很好,但里面的输入没有绑定(bind)!任何想法将不胜感激。 最佳答案 你可以这样使用:这是工作演示:https://

javascript - 如何在 VueJS2 中将事件目标作为 $emit 参数传递?

我有这个VueJS2模板varaThing=Vue.component('something',{template:`Clickme`});是否可以将实际按下的按钮作为参数传递给$emit?例如在click事件中,它通常被传递,但事件可以在这样的函数中访问function(event){event.target;//Iwantthis}这是我的问题的jsfiddlehttps://jsfiddle.net/wntzv4sk/2/ 最佳答案 Vue通过名为$event的变量使事件对象在模板中可用。这是documentedhere.既然

javascript - Angular AOT : ERROR in ng component html file : Expected 0 arguments, 但得到 1

最初我在发布angular.net核心SPA应用程序时遇到以下错误:Can'tresolverxjs/operatorsinrelease\directives我已经通过将rxjs版本更新到5.6解决了这个问题。现在在发布应用程序时出现以下错误:WARNINGinEnvironmentPlugin-NODE_ENVenvironmentvariableisundefined.Youcanpassanobjectwithdefaultvaluestosuppressthiswarning.Seehttps://webpack.js.org/plugins/environment-plug

javascript - 如何从父组件将类应用到 Vue.js 功能组件?

假设我有一个功能组件:Somefunctionalcomponent现在我在一些带有类的父级中渲染这个组件:结果DOM没有将new-class应用于Functional子组件。现在据我了解,Vue-loader将Functional组件针对render函数context编译为explainedhere.这意味着类不会被直接应用和智能合并。问题是-如何在使用模板时让函数式组件与外部应用的类很好地配合?注意:我知道可以通过渲染函数轻松实现:Vue.component("functional-comp",{functional:true,render(h,context){returnh("

javascript - 在 VUE 中切换样式时边框样式无法正确呈现

检查这个demo下面:newVue({ el:'#app',data:{ flag:true},computed:{ style(){letstyleA={borderBottom:'1pxsolidred',borderRight:'1pxsolidred'};letstyleB={ border:'1pxsolidgreen',borderRight:'1pxsolidred'}returnthis.flag?styleA:styleB}},methods:{ changeStyle(){ this.flag=!this.flag;}}}).box{width:100px;heig