我有一个包含以下哈希的组件
{
computed: {
isUserID: {
get: function(){
return this.userId?
}
}
}
我应该观看isUserID还是userId改变？你能看到计算属性吗？
在vuex getter中我知道可以从另一个vuex模块访问状态,如下所示:
pages: (state, getters, rootState) => {
console.log(rootState);
}
如何从另一个vuex模块而不是状态访问getter？
我有另一个名为过滤器的 vuex模块,我需要访问,我试过这个:
rootState.filters.activeFilters
activeFilters我的吸气剂在哪里,但这不起作用.使用rootState.filters.getters.activeFilters也行不通.
我有一些可通过以下方式访问的数据:
{{ content['term_goes_here'] }}
......并且评估为true或者false.我想根据表达式的真实性添加一个类,如下所示:
<i class="fa" v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"></i>
这里true给我的阶级fa-checkbox-marked和假会给我fa-checkbox-blank-outline.我上面写的方式给了我一个错误:
- invalid expression: v-bind:class="[{{content['cravings']}} ? 'fa-checkbox-marked' : 'fa-checkbox-blank-outline']"
我该怎么写它才能有条件地确定课程？
在Vue.js文档中有一个如下例子:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
上面的代码是必要的和重复的.将其与计算属性版本进行比较:
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
观察者比计算属性更合适的情况是什么？我该如何决定选择哪个？文档一直说它更"通用",但并没有真正实现其目的.
如何从Vue.js数据对象(即关联数组)中删除属性/键,如下所示:
var vm = new Vue({
data: {
users: {
foo : { firstName: ..., lastName: ... },
bar : { firstName: ..., lastName: ... }
}
},
methods: {
someFunction : function ()
{
// how to remove `users.foo`?
}
}
});
谷歌搜索,我找到了这两种方式,但都不起作用:
delete this.users.foo; 没有更新DOMthis.users.splice('foo', 1); 根本不起作用(可能只适用于数组,而不适用于对象)使用纯HTML/JS,可以查看输入元素的所选文件的JavaScript File对象,如下所示:
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
但是,当将其转换为'Vue'方式时,它似乎不会按预期工作,只返回undefined而不是返回File对象数组.
这是它在我的Vue模板中的样子:
<input type="file" id="file" class="custom-file-input"
v-on:change="previewFiles(this.files)" multiple>
当previewFiles函数就是(位于方法)的情况如下:
methods: {
previewFiles: function(files) {
console.log(files)
}
}
这样做有替代/正确的方法吗？谢谢
我有以下jsfiddle有两个Vuetify选项卡.该文档未显示vue-router与它们一起使用的示例.
我发现了这个关于如何使用Vuetify的Medium.com帖子vue-router,其中包含以下代码:
<div id="app">
<v-tabs grow light>
<v-tabs-bar>
<v-tabs-item href="/" router>
<v-icon>motorcycle</v-icon>
</v-tabs-item>
<v-tabs-item href="/dog" router>
<v-icon>pets</v-icon>
</v-tabs-item>
</v-tabs-bar>
</v-tabs>
<router-view />
</div>
但是,代码现在已过时,因为Vuetify 1.0.13 Tabs文档未router在其api中指定prop,因此帖子中的嵌入示例不起作用.
我还发现这个StackOverflow答案有以下代码:
<v-tabs-item :to="{path:'/path/to/somewhere'}">
但是,使用to道具不起作用,它也没有在Vuetify api中列出.相比之下,v-buttonVuetify组件确实列出了一个to道具和利用vue-router,所以我希望vue-router支持的组件支持to道具.
在旧的Vuetify 0.17文档中挖掘,to道具是指定的v-tabs-item.看来支持可能已在1.0.13中删除.
我如何使用vue-routerVuetify标签？
<div>单击div内的按钮是否可以防止元素上的功能运行？
单击按钮元素时,功能:toggleSystemDetails不应该被触发？这可能在Vue吗？
<div v-on:click="toggleSystemDetails($event, system.id);" class="grid-tile__list-item" v-for="(system, index) in organization.systems" :key="system.id" :class="{'in-viewport fully-in-viewport': system.inview, 'is-xsmall': system.layout === 'xsmall', 'is-small': system.layout === 'small', 'is-medium': system.layout === 'medium', 'is-large': system.layout === 'large'}">
<div class="grid-tile__list-item--overlay">
<button v-on:click="toggleTileOptionsMode($event, system.id, system.name, system.layout)">
Layout Settings
</button>
</div>
在v-for循环中显示之前,如何按名称或性别对数组进行排序？ https://jsfiddle.net/rg50h7hx/
<div id="string">
<ul>
<li v-for="array in arrays">{{ array.name }}</li>
</ul>
</div>
// Vue.js v. 2.1.8
var string = new Vue({
el: '#string',
data: {
arrays: [
{ name: 'kano', sex: 'man' },
{ name: 'striker', sex: 'man' },
{ name: 'sonya', sex: 'woman' },
{ name: 'sindell', sex: 'woman' },
{ name: 'subzero', sex: 'man' }
]
}
})
我必须使用"计算机",或其他什么？
我正在构建一个小应用程序,Vuejs 2.0我有大约15个迭代元素,我想限制v-for只有5个元素,并且可以有更多的按钮来显示整个列表.有可能吗？