如何使用vue根据数据库文档中的不同数据在页面上呈现不同的内容？

ie3xauqp 于 2023-08-07 发布在 Vue.js

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

我有一个firestore数据库中的位置，我试图有，所以这取决于哪个位置是存储在位置数据库中。像这样的东西

<div v-if="error">{{ error }}</div>
    <div v-if="Profile" class="Profile">
<p>Profile.Name<p>
<div v-if="Profile.Location == A >
<p>Only Location A and not location B or any other</div
</div

<div v-else>
      <div class="spin"></div>
     </div>

字符串
我知道上面的<div v-if=“Profile.Location == LocA>不起作用，这就是我认为它会做的，我知道你可以像这样根据位置过滤配置文件。

const { documents: Profile } = getCollection(
      'Profile', 
      ['Location', '==', 'A']
    )

型
但我不能在这里这样做，因为我必须显示其余的文档数据，只是一个特定的div的个人资料页面不能显示，因为值的位置在这种情况下。在这个例子中，我得到的配置文件后，点击一个用户的显示卡，路由我到这个页面，然后使用useroute.params.id得到那里的个人资料。
我已经看过vue文档中关于条件渲染的内容了，但是还没有找到基于实际位置的值来实现条件渲染的方法，有没有人知道是否可以这样做，如果可以的话，如何基于文档数据值来渲染特定的div元素呢？

vue.js

来源：https://stackoverflow.com/questions/76667557/how-do-i-render-different-content-on-page-based-on-different-data-within-a-datab

1条答案

按热度按时间

bweufnob1#

由于您没有在这里提供一些脚本代码，我假设您使用的是vue 3和<script setup>。

<template>
  <div>
    <div v-if="error">{{ error }}</div>
    <div v-if="profile">
      <p>{{ profile.name }}</p>
      <div v-if="isLocationA">
        <p>Only Location A and not location B or any other</p>
      </div>
    </div>
    <div v-else>
      <div class="spin"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { useRoute } from 'vue-router';
import { doc, getDoc } from '@firebase/firestore';

const route = useRoute();
const db = /* your firebase db instance */
const profileId = route.params.id; 

let error = ref(null);
let profile = ref(null);
let isLocationA = computed(() => profile.value?.location === 'A');

onMounted(async () => {
  try {
    const docRef = doc(db, 'Profile', profileId);
    const docSnap = await getDoc(docRef);

    if (docSnap.exists()) {
      profile.value = docSnap.data();
    } else {
      console.log('No such document!');
    }
  } catch (err) {
    error.value = err;
  }
});
</script>

字符串
在这条路上，事情是直线前进。你可以根据计算属性添加位置，就像isLocationA一样。
并且还请注意，基于路由参数来管理简档。
希望这对你有帮助！🌷

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

我来回答

如何使用vue根据数据库文档中的不同数据在页面上呈现不同的内容？

1条答案

相关问题

热门标签

最新问答