我有一个有助于过滤数据的功能.我在v-on:change用户更改选择时使用,但我甚至需要在用户选择数据之前调用该函数.我AngularJS以前使用过的方法也一样,ng-init但据我所知,没有这样的指令vue.js
这是我的功能:
getUnits: function () {
var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};
this.$http.post('/admin/units', input).then(function (response) {
console.log(response.data);
this.units = response.data;
}, function (response) {
console.log(response)
});
}
在blade文件中我使用刀片表单来执行过滤器:
<div class="large-2 columns">
{!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
</div>
<div class="large-3 columns">
{!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}
</div>
当我选择特定项目时,此工作正常.然后,如果我点击所有让我们说all floors,它的工作原理.我需要的是当页面加载时,它调用getUnits将执行$http.post空输入的方法.在后端,我已经处理了请求,如果输入为空,它将提供所有数据.
我怎么能这样做 …
我有一个动态的观点:
<div id="myview">
<div :is="currentComponent"></div>
</div>
与关联的Vue实例:
new Vue ({
data: function () {
return {
currentComponent: 'myComponent',
}
},
}).$mount('#myview');
这允许我动态地更改我的组件.
就我而言,我有三个不同的部分组成:myComponent,myComponent1,和myComponent2.我在他们之间切换如下:
Vue.component('myComponent', {
template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>"
}
现在,我想把道具传递给myComponent1.
当我将组件类型更改为时,如何传递这些道具myComponent1？
var MainTable = Vue.extend({
template: "<ul>" +
"<li v-for='(set,index) in settings'>" +
"{{index}}) " +
"{{set.title}}" +
"<button @click='changeSetting(index)'> Info </button>" +
"</li>" +
"</ul>",
data: function() {
return data;
}
});
Vue.component("main-table", MainTable);
data.settingsSelected = {};
var app = new Vue({
el: "#settings",
data: data,
methods: {
changeSetting: function(index) {
data.settingsSelected = data.settings[index];
}
}
});
使用上面的代码,单击按钮时会出现以下错误.
[Vue警告]:属性或方法"changeSetting"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.(找到
<MainTable>)
我有一个组件与一些表单验证.这是一个多步骤结帐表格.下面的代码是第一步.我想验证用户输入了一些文本,将其名称存储在全局状态,然后发送到下一步.我正在使用vee-validate和vuex
<template>
<div>
<div class='field'>
<label class='label' for='name'>Name</label>
<div class="control has-icons-right">
<input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last">
<span class="icon is-small is-right" v-if="errors.has('name')">
<i class="fa fa-warning"></i>
</span>
</div>
<p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p>
</div>
<div class="field pull-right">
<button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button>
</div>
</div>
</template>
<script>
export default {
methods: {
nextStep(){
var self = this;
// from baianat/vee-validate
this.$validator.validateAll().then((result) => {
if (result) {
this.$store.dispatch('addContactInfoForOrder', self);
this.$store.dispatch('goToNextStep');
return; …我的应用使用Firebase API进行用户身份验证,将登录状态保存为Vuex状态中的布尔值.
当用户登录时,我设置登录状态并相应地有条件地显示登录/登出按钮.
但是当刷新页面时,vue应用程序的状态将丢失并重置为默认值
这会导致问题,即使用户登录并刷新页面时,登录状态也会设置为false,并且即使用户保持登录状态,也会显示登录按钮而不是注销按钮....
我该怎么做才能防止这种行为
我可以使用cookies 或任何其他更好的解决方案可用...
我的vue组件是这样的:
<template>
<div>
<div class="panel-group" v-for="item in list">
...
<div class="panel-body">
<a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
Show
</a>
</div>
<div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
...
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
执行时,会出现如下错误:
Vue模板语法错误:
id ="purchase - {{item.id}}":已删除内部属性中的插值.改为使用v-bind或冒号.
我该如何解决？
如何更改Vue-cli项目中的端口号,以便它在另一个端口而不是8080上运行.
如何通过v-forX(例如10次)重复循环？
// want to repeat this (e.g.) 10 times
<ul>
<li v-for="item in shoppingItems">
{{ item.name }} - {{ item.price }}
</li>
</ul>
文档显示:
<ul>
<li v-for="item in 10">{{ item }}</li>
</ul>
// or
<li v-for="n in 10">{{ n }} </li>
// this doesn't work
<li v-for="item in 10">{{ item.price }}</li>
但vue从哪里知道对象的来源？如果我像文档说的那样呈现它,我会获得项目和项目的数量,但没有内容.
我是Vuejs的新手.做了些什么,但我不知道这是简单/正确的方式.
我想要的是
我想在数组中有一些日期并在事件上更新它们.首先我尝试了Vue.set,但它没有成功.现在更改我的数组项后:
this.items[index] = val;
this.items.push();
我推送()没有任何数组,它会更新..但有时最后一项将被隐藏,不知何故......我认为这个解决方案有点hacky,我怎么能让它稳定？
简单的代码在这里:
new Vue({
el: '#app',
data: {
f: 'DD-MM-YYYY',
items: [
"10-03-2017",
"12-03-2017"
]
},
methods: {
cha: function(index, item, what, count) {
console.log(item + " index > " + index);
val = moment(this.items[index], this.f).add(count, what).format(this.f);
this.items[index] = val;
this.items.push();
console.log("arr length: " + this.items.length);
}
}
})ul {
list-style-type: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<div id="app">
<ul>
<li v-for="(index, item) in items">
<br><br>
<button v-on:click="cha(index, item, 'day', -1)">
- …我是vue.js(2)的新手,我目前正在开发一个简单的事件应用程序.我已设法添加事件但现在我想基于单击按钮删除事件.
HTML
<div class="list-group">
<div class="list-group-item" v-for="event in events">
<h4 class="list-group-item-heading">
{{ event.name }}
</h4>
<h5>
{{ event.date }}
</h5>
<p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>
<button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
</div>
</div>
</div>
JS(Vue公司)
new Vue ({
el: '#app',
data: {
events: [
{
id: 1,
name: 'Event 1',
description: 'Just some lorem ipsum',
date: '2015-09-10'
},
{
id: 2,
name: 'Event 2',
description: 'Just another lorem ipsum',
date: '2015-10-02'
}
],
event: { name: '', description: '', date: '' …