Vue.js Axios进行属性更改

我有一个月的列表，我想通过点击API检索每个月的约会。我现在所拥有的：

HTML

这是可行的，但非常糟糕。我需要在该方法中执行许多其他操作，例如更改

isActive

参数

我还在

create（）

中调用此方法以调用初始事件集-这是正确的方法吗

是否有一种方法可以使用计算属性来监视

年

和

月

，如果它们被更改为触发

retrieveCalendar

方法？或者我应该使用

方法

，还是应该以某种方式将其移动到计算属性？或者是否还有第一百种方法可以正确完成此操作？

解决方案： 简单 只需单击保存索引，即可获得所有必需的数据，而无需将参数传递给

retrieveCalendar

方法

i活动

正如您在下面看到的，这也使得我们甚至不需要

isActive

属性。在类绑定中，您可以简单地将活动索引与当前索引进行比较

当<代码>年<代码>和<代码>月<代码>更改时，触发<代码>检索日历 这就是我们的目的。由于您多次调用同一个方法，并且您已经拥有了该方法，因此将观察者注册为方法名称的字符串是最有效的

通过

$vm\create（）初始化
这是正确的吗？对有更好的办法吗？对

通过将属性为
immediate:true
的对象传递给Vue观察程序，可以跳过
#create（）
调用。Vue将在CreateHook上为您调用它。
问题是这是一个未记录的VUEAPI，可能会让其他人在阅读您的代码时感到困惑

在这里学习了以上几个技巧：


let app=new Vue({
el:“#应用程序”，
数据：\=>({
activeMonthIndex:new Date（）.getMonth（），
当前年份：新日期（）.getYear（），
月份：[
“一月”，
“二月”，
“三月”，
“四月”，
“五月”，
“六月”，
“七月”，
“八月”，
“9月”，
“十月”，
“11月”，
“12月”
]
}),
方法：{
retrieveCalendar（）{
设月份=this.activeMonthIndex+1；
让year=本年；当前年；
让object=this.months[this.activeMonthIndex]；
返回控制台.log(
`我实际上没有访问你的API的权限`
);
axios.get(
“api/日历/”+
年+
'/' +
月+
'/1'
)。然后（响应=>{
this.days=response.data
});
}
},
观察：{
activeMonthIndex：{
处理程序：“retrieveCalendar”，
/* 
`立即：true`确保此方法
将在创建时运行，以及在监视
属性更改。
*/
立即：对
},
当前年份：“retrieveCalendar”
}
});
body{背景：线性渐变（135度，#42e695 0，#3bb2b8 100%）；字体系列：futura，helvetica；背景重复：无重复；高度：100vh；宽度：100%；填充：2px}a{过渡：所有500ms缓解；显示：内联弯曲；边距：5px；背景：fafafafa；填充：20px；边框半径：5px；方框阴影：0 20px 50px-10px rgba（0,0,0,0,2）}h1）{color:#fff；文本阴影：02px 5px rgba（0,0,0,2）}a:hover{transform:translateY（-2px）；cursor:pointer；}a.active{filter:invert（100%）}.months{display:flex；flex direction:column wrap；flex wrap:wrap；justify content:flex start；align items:flex end；}


正在加载{{months[activeMonthIndex]}的日历。。。
（不是真的，只是一个演示）

{{month}

<div class="months">
    <a v-on:click="retrieveCalendar(index + 1, currentYear, month)" v-bind:class="{active : month.isActive}" v-for='(month, index) in months'>{{ month.name }}</a>
</div>

methods: {
    retrieveCalendar: function(month, year, object = []) {
        axios.get('api/calendar/' + year + '/' + month + '/1').then(response => (this.days = response.data));
    }
}