javascript - Pug 无法访问动态类属性中 vue 中的计算属性

Question

因此，我尝试根据计算属性动态切换类名，但哈巴狗似乎无法访问计算属性。我尝试手动将 true 设置为 className，然后就可以了。

我试图将计算属性重新分配给 pug 变量，但它仍然不起作用

使用纯 html 时，类可以正确地动态切换

哈巴狗:

main#app.container
  - var isPinkDefinitely = isPink ? 'pink' : 'gray';
  div.section(
    v-bind:class=[
      'custom-section',
      {
        'custom-section--pink': isPink
      }
    ] 
    v-bind:style=[
      {
        'background-color': isPinkDefinitely
      }
    ]
  ) {{ isPink }}
    form(@submit.prevent="addItem")
      label.label Add another
      div.field.has-addons
        div.control
          input.input(required, autofocus, v-model="newItem", placeholder="Remake this in React")
        button(type="submit").button.is-info
          i.fa.fa-plus
          span Add

    transition(name="slide")
      div(v-show="items.length > 0")

        hr

        ul
          transition-group(name="slide")
            li(v-for="(item, index) in items", :key="item.id")
              button(@click="removeItem(index)").button.is-danger
                i.fa.fa-trash
              span(v-text="item.desc")

        hr

        span(v-text="'Total: ' + items.length")

JS:

new Vue({
  el: '#app',
  data: {
    items: [
      {id: 1, desc: "Lorem"},
      {id: 2, desc: "Ipsum"},
      {id: 3, desc: "Dolor"},
    ],
    newItem: '',
  },
  computed: {
    isPink() {
      return true;
    }
  },
  methods: {
    addItem () {
      const id = this.items.length + 1
      this.items.push({id, desc: this.newItem})
      this.newItem = ''
    },
    removeItem (index) {
      this.items.splice(index, 1)
    },
  },
})

https://codepen.io/itprogressuz/pen/qBoePob?editors=1010

---

更新:所以基本上的解决方案是只在一个对象内的一行中写所有的类。查看@aykut 的解决方案

Answer 1

我刚刚尝试解决您的问题，我想我成功了。你可以像我一样使用变量。如果你想在计算函数中改变它，它会动态改变。您还可以在获取用户事件时在方法函数中更改它。这是我的解决方案。

main#app.container

div.section(
class="default-style"
:class="{'bg-pink': isPink }"

) {{ setIsPink }}
form(@submit.prevent="addItem")
  label.label Add another
  div.field.has-addons
    div.control
      input.input(required, autofocus, v-model="newItem", placeholder="Remake 
this in React")
    button(type="submit").button.is-info
      i.fa.fa-plus
      span Add

transition(name="slide")
  div(v-show="items.length > 0")

    hr

    ul
      transition-group(name="slide")
        li(v-for="(item, index) in items", :key="item.id")
          button(@click="removeItem(index)").button.is-danger
            i.fa.fa-trash
          span(v-text="item.desc")

    hr

    span(v-text="'Total: ' + items.length")

//CSS文件

.default-style{
background-color: gray;
}

.bg-pink{
    background-color: pink;
    }

//js文件

new Vue({
  el: '#app',
  data: {
   
    isPink: false,
    items: [
      {id: 1, desc: "Lorem"},
      {id: 2, desc: "Ipsum"},
      {id: 3, desc: "Dolor"},
    ],
    newItem: '',
  },
  computed: {
    setIsPink() {
      this.isPink = !this.isPink;
      return this.isPink;
    }
  },
  methods: {
    addItem () {
      const id = this.items.length + 1
      this.items.push({id, desc: this.newItem})
      this.newItem = ''
    },
    removeItem (index) {
      this.items.splice(index, 1)
    },
  },
})