多个类似按钮Vue/Vuetify

xqkwcwgp 于 2023-04-07 发布在 Vue.js

关注(0)|答案(1)|浏览(162)

我有一个搜索栏，它从API查询中以
数据：[[id，datafield 1，datafield 2]，[id，datafield 1，datafield 2]，...]
我想在每一行数据中添加一个开/关按钮。每个按钮都应该有一个独立的方式来判断它是关还是开。我稍后会添加更多的功能，我喜欢它的外观，所以如果可能的话，我想坚持使用v-btn。
按钮逻辑是

<v-btn
    color="primary"
    variant="outlined"
    @click="trackBill"
    >{{ this.trackedBtnText }}</v-btn
>

脚本包括

<script>
export default {
    data: () => ({ bills: [], trackedBtnText: 'Track', tracked: false }),
    methods: {
        async showBills() {
            this.bills = await showBills(this.keywords);
        },
        trackBill() {
            this.tracked = !this.tracked;
            this.trackedBtnText = this.tracked ? 'Tracked' : 'Track';
        },
    },
};
</script>

当我点击一个按钮时，每个按钮上的文本都会发生变化。我想为每个函数维护一些单独的变量。他们将在开发过程中根据他们获得的数据进行API查询，所以如果他们也能保存其他数据就太好了。

vue.js

来源：https://stackoverflow.com/questions/75908290/multiple-similar-buttons-vue-vuetify

1条答案

按热度按时间

zc0qhyus1#

当你需要多次执行某件事情时，尽量使用v-for。不要重复更多的代码。
只需将您的配置数据放入数组中的对象中。包括定义按钮所需的所有内容，即标题，状态，CSS类，查询所需的数据等：

buttonData: [
        {title: 'Column 1', checked: false},
        {title: 'Column 2', checked: true},
        {title: 'Column 3', checked: false},
      ]

然后你可以使用v-for来绘制按钮：

<v-btn
          v-for="button in buttonData"
          :key="buttonData.title"
          @click="$event => button.checked = !button.checked"
        >
         {{ button.title + ' is ' + (button.checked ? 'on' : 'off') }}
        </v-btn>

然后可以通过数组访问按钮的状态。
请注意，按钮实际上并不打算用作切换开关，您可能需要考虑使用switches或checkboxes。
下面是一个代码片段（不确定您使用的是Vue 2还是3，所以我选择了2，但这应该没关系）

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
      buttonData: [
        {title: 'Column 1', checked: false},
        {title: 'Column 2', checked: true},
        {title: 'Column 3', checked: false},
      ]
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>

<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-btn
          v-for="button in buttonData"
          :key="buttonData.title"
          :color="button.checked ? 'primary' : 'secondary'"
          class="ma-4"
          @click="$event => button.checked = !button.checked"
        >{{ button.title + ' is ' + (button.checked ? 'on' : 'off') }}</v-btn>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

赞(0）回复(0）举报 2023-04-07

我来回答

多个类似按钮Vue/Vuetify

1条答案

相关问题

热门标签

最新问答