只选择后我点击(v-为@点击vue.js)，但它选择所有保存的职位，因为v-为，我可以用什么代替？

gfttwv5a 于 2022-11-25 发布在 Vue.js

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

我正在做一个小的博客项目来练习vue.js。我正在使用合成API脚本设置。当你写一篇文章时，它会保存在localStorage中。当你点击博客中的文本时，它会打开一个覆盖层和一个大尺寸的博客文本。只是它不仅显示我点击的那篇文章，而且还显示其他早期的博客文章。我如何才能集中精力，使它只显示我点击的那篇文章。我正在使用tailwind作为css。

在这个链接上，你可以测试自己，但在这里我有一些dummytext在我做它之前，所以注意。文本将显示; https://unique-sprinkles-d1a6cd.netlify.app/

<template>
    <div v-if="showModal" @click="showModal = false" class="absolute w-screen h-screen bg-black opacity-75 z-10 flex cursor-pointer items-center justify-center">
        <div v-for="note in notes" :key="note.id" class="bg-white  hover:border-red-400 p-4 rounded-full text-2xl font-bold"><p>{{ note.text }}</p></div>
    </div>
<div class="w-6/12 text-center m-auto">
    <h1 class="text-4xl font-bold text-indigo-500 m-5">Blog Posts</h1>
    <div  class="border-2 border-slate-100 rounded-3xl hover:border-red-400" v-for="note in notes" :key="note.id" > 
        <div class="relative flex flex-col m-0 justify-around cursor-pointer">
            <button class="absolute top-0 right-0 w-5 h-5 cursor-pointer rounded-full hover:bg-red-400 p-2.5" @click="deleteBtn(note)">x</button>
            <img class="w-24 h-24 p-3.5 rounded-full" :src="note.img"> 
            <p class="text-xs text-right pr-3.5"> {{ note.writer }}</p>
            <p class="text-lg font-bold"> {{ note.headline }}</p>
            <p @click="showModal = true" class="text-left p-3.5 text-sm"> {{ note.text }}</p>
        </div>
    </div>
</div>
</template>

<script setup>
import { ref } from 'vue';

const notes = ref([]);

notes.value = JSON.parse(localStorage.getItem('notes'));

    function deleteBtn(note){
        notes.value.splice(notes.value.indexOf(note), 1);
        localStorage.setItem('notes', JSON.stringify(notes.value));

        notes.value = JSON.parse(localStorage.getItem('notes'));
        console.log(notes.value)
    }

const showModal = ref(false)
</script>

更改后它看起来像这样;我怎样才能使空白的方块消失，也不透明度为0的白色textarea，所以没有文字从后面显示。我试过顺风不透明度功能，但不工作。

vue.js

来源：https://stackoverflow.com/questions/74475351/only-select-post-im-clicking-on-v-for-click-vue-js-but-its-selecting-all-save

1条答案

按热度按时间

tf7tbtn21#

以下是一种可用于条件渲染的方法。
在不使用子组件处理v-loops时，可以在循环中使用index，然后使用v-if="selectedIndex = index有条件地呈现它。
在模态部分中，添加v-if，如下所示

<div 
  v-if="showModal" 
  @click="showModal = false" 
  class="absolute w-screen h-screen bg-black opacity-75 z-10 flex cursor-pointer items-center justify-center"
>
    <div 
      v-for="(note, index) in notes" 
      :key="note.id" 
      class="bg-white hover:border-red-400 p-4 rounded-full text-2xl font-bold"
    >
      <p v-if="selectedIndex === index">{{ note.text }}</p>
    </div>
</div>

然后在呈现要单击的文本的位置添加一个click事件，以便在单击具有相关索引的不同呈现内容时更新selectedIndex。

<div
  v-for="(note, index) in notes"
  :key="note.id"
  class="border-2 border-slate-100 rounded-3xl hover:border-red-400"
  @click="selectedIndex = index"
> 
   <div 
      class="relative flex flex-col m-0 justify-around cursor-pointer"
   >
     ...
   </div>
</div>

然后在script标记中，添加selectedIndex的引用

const selectedIndex = ref(null)

注意：如果您的@click="showModal = true"比selectedIndex更新快，您将获得“延迟”更新。要解决此问题，您需要将@click="showModal = true"转换为函数，该函数包括updateIndex和此showModal重新分配。

它看起来像这样

<template>
// other parts...
<p @click="updateValues(index)" class="text-left p-3.5 text-sm"> {{ note.text }}</p>
// other parts...
</template>

<script setup>
// ... your other functions above

const updateValues = (index) => {
  selectedIndex.value = index
  showModal.value = true
}
</script>

无论如何，我认为最好将这两个项目（模态和渲染文本）分成不同的组件，这样你就可以更容易地处理逻辑。

赞(0）回复(0）举报 2022-11-25

我来回答

只选择后我点击(v-为@点击vue.js)，但它选择所有保存的职位，因为v-为，我可以用什么代替？

1条答案

相关问题

热门标签

最新问答