updateList() { if (this.selectedItem === 'option3' && this.selectedYear === 'option1' && this.selectedTime === 'option1' && this.selectedIndex === 'option1') { this.list = list1; }vue中这样为什么传不了data()中list1的值
时间: 2023-09-28 09:12:06 浏览: 46
可能是因为list1没有定义在Vue实例的data中。在Vue中,只有在data中定义的属性才会被Vue所观察和响应式处理。如果list1没有被定义在data中,就不能直接在Vue模板中使用它。
解决方法是将list1定义在data中,或者将list1作为props传递给组件。如果list1是异步获取的数据,可以在获取数据后将其赋值给data中的属性,这样就可以在模板中使用了。
相关问题
methods: { updateList() { if (this.selectedItem === 'option3' && this.selectedYear === 'option1' && this.selectedTime === 'option1' && this.selectedIndex === 'option1') { const sortedList = this.list1.slice().sort(); // 复制并排序 this.list = sortedList; // 赋值给响应式属性 } } }怎么对list中item.value/item.target的值从大到小排序
如果你想对`list`中的元素按照`item.value`或`item.target`的值从大到小排序,可以传入一个排序函数给`sort()`方法,并在函数中比较`item.value`或`item.target`的值。
例如,如果你想按照`item.value`的值从大到小排序,可以这样写:
```
this.list.sort((a, b) => b.value - a.value);
```
这里我们传入一个比较函数,函数返回值为两个元素的差值,如果差值大于0,则表示需要交换两个元素的位置。
如果你想按照`item.target`的值从大到小排序,可以这样写:
```
this.list.sort((a, b) => b.target - a.target);
```
同样的,这里我们也传入一个比较函数,以`item.target`的值为比较标准进行排序。
完整的代码如下:
```
methods: {
updateList() {
if (this.selectedItem === 'option3' && this.selectedYear === 'option1' && this.selectedTime === 'option1' && this.selectedIndex === 'option1') {
const sortedList = this.list1.slice().sort((a, b) => b.value - a.value); // 按照item.value从大到小排序
this.list = sortedList; // 赋值给响应式属性
}
}
}
```
computed: { computedData() { if (this.selectedItem === 'option1' && this.selectedYear === 'option1' && this.selectedTime === 'option1' && this.selectedIndex === 'option1') { this.list = [ { title: "测绘院", value: 8.88 }, { title: "经信局", value: 5.78 }, { title: "环保部", value: 5.66 }, { title: "农村社", value: 4.66 }, { title: "部门", value: 4.66 }, { title: "部门", value: 4.66 }, { title: "部门", value: 4.66 }, { title: "部门", value: 4.66 }, { title: "部门", value: 4.66 }, { title: "部门", value: 4.66 }, { title: "部门", value: 4.66 }, { title: "部门", value: 4.66 }, ]; } else { return ''; }改写成watch方法
将上述代码改写成watch方法的实现如下:
```
watch: {
selectedItem: {
handler: function(newValue, oldValue) {
this.updateList();
}
},
selectedYear: {
handler: function(newValue, oldValue) {
this.updateList();
}
},
selectedTime: {
handler: function(newValue, oldValue) {
this.updateList();
}
},
selectedIndex: {
handler: function(newValue, oldValue) {
this.updateList();
}
}
},
methods: {
updateList() {
if (this.selectedItem === 'option1' && this.selectedYear === 'option1' && this.selectedTime === 'option1' && this.selectedIndex === 'option1') {
this.list = [
{ title: "测绘院", value: 8.88 },
{ title: "经信局", value: 5.78 },
{ title: "环保部", value: 5.66 },
{ title: "农村社", value: 4.66 },
{ title: "部门", value: 4.66 },
{ title: "部门", value: 4.66 },
{ title: "部门", value: 4.66 },
{ title: "部门", value: 4.66 },
{ title: "部门", value: 4.66 },
{ title: "部门", value: 4.66 },
{ title: "部门", value: 4.66 },
{ title: "部门", value: 4.66 },
];
} else {
this.list = '';
}
}
}
```
这里使用了watch来监测selectedItem、selectedYear、selectedTime和selectedIndex的变化,如果其中有一个发生了改变,就会调用updateList方法来更新list数组的值。updateList方法中的实现和之前的computed函数是一样的。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)