如何在XML视图中绑定筛选器值

<template>
  <div>
    <select v-model="selectedValue">
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
    <button @click="filterData">Filter</button>
    <ul>
      <li v-for="item in filteredData" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedValue: '',
      data: [
        { id: 1, name: 'Item 1', category: 'option1' },
        { id: 2, name: 'Item 2', category: 'option2' },
        { id: 3, name: 'Item 3', category: 'option3' },
      ],
    };
  },
  computed: {
    filteredData() {
      if (this.selectedValue === '') {
        return this.data;
      } else {
        return this.data.filter(item => item.category === this.selectedValue);
      }
    },
  },
  methods: {
    filterData() {
      // 可以在这里将筛选器的值发送到服务器进行进一步处理
      console.log(this.selectedValue);
    },
  },
};
</script>