v-for 循环中的 Vue3 切换元素

Question

我在 vue 3 中的 v-for 循环中遍历数组。有没有办法通过单击标题元素来切换段落的 v-show。下面是我的代码：

<div class="defs">
<ul v-for="(d, index) in definitions"
              :key="'d' + index">
   <li>
  <div class="project" >
    <div @click="showDetails" class="actions">
      <h3>{{ d.title }}</h3>
      <div class="icons">
         <span  class="material-icons" ><i class="fas fa-trash-alt"></i></span> 
  <span class="material-icons" ><i class="fas fa-pencil-alt"></i></span> 
      </div>
    </div>
    <div v-if="show" class="details">
      <p>{{d.explanation}}</p>
    </div>
  </div>
  </li>
</ul>
</div>



<script>
import { ref } from "vue";
import { projectDatabase} from '../../firebase/config'

export default {
  props: ['id'],
  setup(props){

  const show = ref(false);

  
  
  const showDetails = () =>{
    show.value = !show.value
  }

      return {
      definitions, props, show, showDetails, 
    }
  }
}
</script>

我知道我们不能在合成中使用它 API。那么我们如何解决切换问题？

Answer 1

像下面的片段一样尝试，这里是 codesandbox with composition API

const demo = {
  data() {
    return {
      definitions: [
        { title: "aaa", explanation: "aaa" },
        { title: "bbb", explanation: "bbb" },
        { title: "ccc", explanation: "ccc" },
      ],
      show: null
    }
  },
  methods: {
    showDetails(idx) {
      this.show === idx ? (this.show = null) : (this.show = idx);
    }
  },
  // same code with coposition API
  /*import { ref } from "vue";
  import { projectDatabase} from '../../firebase/config'
  setup() {
    const show = ref(null);
    const definitions = ref([
      { title: "aaa", explanation: "aaa" },
      { title: "bbb", explanation: "bbb" },
      { title: "ccc", explanation: "ccc" },
    ]);

    const showDetails = (idx) => {
      show.value === idx ? (show.value = null) : (show.value = idx);
    };

    return { definitions, show, showDetails }
  },*/
};
Vue.createApp(demo).mount("#demo");

<script src="https://unpkg.com/vue@next"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<div id="demo">
  <div class="defs">
    <ul>
      <li v-for="(d, index) in definitions" :key="index">
        <div class="project">
          <div @click="showDetails(index)" class="actions">
            <h3>{{ d.title }}</h3>
            <div class="icons">
              <span class="material-icons"
                ><i class="fas fa-trash-alt"></i
              ></span>
              <span class="material-icons"
                ><i class="fas fa-pencil-alt"></i
              ></span>
            </div>
          </div>
          <div v-if="show === index" class="details">
            <p>{{ d.explanation }}</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

v-for 循环中的 Vue3 切换元素

Vue3 toggle element in v-for loop

javascript

vue.js

v-for

vuejs3

vue-composition-api