vuejs2 相关问题

我的模板上有这个标记： {{ location.legal_name }} {{ 位置.地址1 }} 我的模板上有这个标记： <div class="locButton" v-for="location in locResult.slice(0, 4)"> <h5>{{ location.legal_name }}</h5> <p>{{ location.address1 }}<p> <p v-if="location.address2 !== undefined">{{ location.address2 }}</p> <p>{{ location.pri_phone }}</p> </div> 但结果元素仍然在 DOM 上像这样打印： <div class="locButton"> <h5>Name</h5> <p>Address1</p> <p></p> <p>Phone</p> </div> 如果该属性未定义或为空，我应该在 v-if 上做什么才能不输出 html <p>标记？您的第一个 <p></p> 标签有错字 <div class="locButton" v-for="location in locResult.slice(0, 4)"> <h5>{{ location.legal_name }}</h5> <p>{{ location.address1 }}<p> <-- THIS NEED TO BE </p> <p v-if="location.address2 !== undefined">{{ location.address2 }}</p> <p>{{ location.pri_phone }}</p> </div> 只需使用： <p v-if="location.address2">{{ location.address2 }}</p> 编辑：证明它有效： https://jsfiddle.net/ok2un1qj/ 问题很简单，你没有关闭这行中的p标签：<p>{{ location.address1 }}<p>，因此浏览器关闭了p的location.address1标签，并在其后面打开一个空的<p></p>。然后 Vue 渲染 ，因为 location.address2 未定义。既然我们发现了问题，我们可以实施的另一个优化就在这里：<p v-if="location.address2 !== undefined">。你说特奥是什么意思？好吧，我们不需要将 location.address2 与 undefined 进行比较。如果 v-if 与 location.address2 或 null 不同，undefiend 将返回 true。检查下面的片段： var app = new Vue({ el: '#app', data: { location: { legal_name: 'Name', address1: 'Address1', pri_phone: 'Phone', } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h5>{{ location.legal_name }}</h5> <p>{{ location.address1 }}</p> <p v-if="location.address2">{{ location.address2 }}</p> <p>{{ location.pri_phone }}</p> </div> 尝试改变 <p v-if="location.address2 !== undefined">{{ location.address2 }}</p> 到 <p v-if="location.address2">{{ location.address2 }}</p> 其他帖子提出的解决方案应该总是有效，但另一种选择是串联使用双逻辑 NOT 来显式强制将任何值转换为相应的 boolean 原语。 !!location.address2 // Enforces boolean value -> True if it contains a value, false otherwise 演示 new Vue({ el: '#app', data() { return { location: { address1: 'Some address', address2: undefined } } }, methods: { addAddress2() { this.location.address2 = 'Address 2'; } } }) #app>p { background-color: lavender; padding: 3px; margin: 5px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <p>{{ location.address1 }}</p> <p v-if="!!location.address2">{{ location.address2 }}</p> <button @click="addAddress2">Add address 2</button> </div>

javascript vue.js vuejs2

回答 5 投票 0

我需要解决vue函数来按俱乐部查找足球运动员

我需要按俱乐部获取球员。当我在第一个下拉列表中选择俱乐部时，我会看到联盟中的每个球员，我只想看到所选俱乐部的球员： ... 我需要按俱乐部获取球员。当我在第一个下拉列表中选择俱乐部时，我会看到联赛中的每个球员，我只想看到所选俱乐部的球员： <template> <div> <div class="topnav"></div> <div> <div class="clubDropdown"> <label for="klub">Odaberi klub:</label> <select v-model="selectedKlub" > <option value="" disabled selected>Odaberi klub</option> <option v-for="klub in klubovi" :value="klub._id" :key="klub._id">{{ klub.naziv }}</option> </select> </div> <button @click="otvoriDialog">Dodaj igrača</button> <ModalComponent v-if="dialogOtvoren" @zatvori="zatvoriDialog"> <AddPlayer @zatvori="zatvoriDialog" /> <button @click="zatvoriDialog" class="close">X</button> </ModalComponent> </div> <div v-if="errorMessage" class="error-message">{{ errorMessage }}</div> <div class="grid"> <div v-for="igrac in igraci" :key="igrac._id" @click="otvoriSliku(igrac)"> <img :src="igrac.slika" alt="Slika igrača"> <p>{{ igrac.ime }} {{ igrac.prezime }}</p> <h2>{{ igrac.nadimak }}</h2> </div> </div> </div> </template> <script> import axios from 'axios'; import AddPlayer from '../components/AddPlayer.vue'; import ModalComponent from '../components/ModalComponent.vue'; export default { name: 'PlayerView', components: { AddPlayer, ModalComponent }, data() { return { klubovi: [], selectedKlub: '', igraci: [], dialogOtvoren: false, errorMessage: '' }; }, methods: { async dobaviKlubove() { try { const response = await axios.get('http://localhost:3000/klubovi'); this.klubovi = response.data; } catch (error) { console.error('Greška prilikom dobavljanja klubova:', error); this.errorMessage = 'Došlo je do greške prilikom dobavljanja klubova sa servera.'; } }, async dobaviIgrace() { try { const response = await axios.get('http://localhost:3000/igraci'); this.igraci = response.data } catch(error) { console.error('Greška prilikom dobavljanja klubova:', error); this.errorMessage = 'Došlo je do greške prilikom dobavljanja klubova sa servera.'; } }, otvoriDialog() { this.dialogOtvoren = true; }, zatvoriDialog() { this.dialogOtvoren = false; }, otvoriSliku(igrac) { window.open(igrac.slika, '_blank'); }, }, mounted() { this.dobaviKlubove(); this.dobaviIgrace(); } }; </script> <style scoped> .error-message { color: red; margin-top: 20px; } .close { cursor: pointer; background: none; border: none; font-size: 1.5rem; } .grid { display: grid; grid-template-columns: repeat(5, 1fr); /* Promijenjeno sa repeat(3, 1fr) na repeat(5, 1fr) */ gap: 20px; } .grid div { border: 1px solid #ccc; padding: 10px; text-align: center; cursor: pointer; } </style> 我尝试了很多方法，但每次换俱乐部时，俱乐部列表都会被屏蔽。这里是前端的 GitHub 链接：https://github.com/HZHBKANJINA/nlhzhbfrontend 对于后端https://github.com/HZHBKANJINA/nlhzhbliga 您正在定义 selectedKlub 但您没有使用它。它应该用于发送新的 API 调用或过滤数据。如果您想加载 API 一次并稍后进行过滤，则必须仅显示与 selectedKlub 匹配的项目。例如： <div v-for="igrac in igraci" :key="igrac._id" @click="otvoriSliku(igrac)"> <span v-if="igrac.klub == selectedKlub"> <img :src="igrac.slika" alt="Slika igrača"> <p>{{ igrac.ime }} {{ igrac.prezime }}</p> <h2>{{ igrac.nadimak }}</h2> </span> </div> 添加 v-if="igrac.klub == selectedKlub" 将仅显示 igrac.klub 等于 selectedKlub 的项目。（如果您还没有从 API 返回，您还必须返回 klub）

node.js vuejs2

回答 1 投票 0

如何调用handleEdit来更新vue.js中的数据

我是 vue.js 新手，我尝试更新数据。我为图标编写了这个 html 以更新数据：我是 vue.js 新手，我尝试更新数据。我为图标编写了这个 html 以更新数据： <i class="mdi mdi-pencil" @click.prevent="$bvModal.show(`Rel${object.id}`)"></i> 这是b-modal的代码： <b-modal :id="`Rel${object.id}`" ref="editModal" title="Update data"> <form class="needs-validation" @submit.prevent="handleEdit(object)"> <div class="row"> <div class="col-md-5"> <label class="mt-3">From*</label> <b-form-input id="example-input" v-model="object.start_date" type="date" placeholder="DD-MM-YYYY" format="DD-MM-YYYY" autocomplete="off" ></b-form-input> </div> <div class="col-md-5"> <label class="mt-3">To*</label> <b-form-input id="example-input" v-model="object.end_date" type="date" placeholder="DD-MM-YYYY" format="DD-MM-YYYY" autocomplete="off" ></b-form-input> </div> <div class="col-md-8"> <label class="mt-3">Days</label> <multiselect required v-model="object.weekdays" :options="weekdayOptions" track-by="id" label="weekday" multiple placeholder="Choose days" selectLabel="Day choose" selectedLabel="Chose" > </multiselect> </div> <div class="col-md-5"> <label class="mt-3">Start time</label> <date-picker v-model="object.start_time" format="HH:mm" value-type="format" type="time" placeholder="HH:mm" ></date-picker> </div> <div class="col-md-5"> <label class="mt-3">End time</label> <date-picker v-model="object.end_time" format="HH:mm" value-type="format" type="time" placeholder="HH:mm" ></date-picker> </div> </div> </form> </b-modal> 这是方法handleEdit的代码： handleEdit(row) { console.log("I am in handle edit"); if (this.timesAreValid(row.start_time, row.end_time, row.is_night_shift)) { console.log("I am in if"); const data = { ...row } delete data['weekdays'] data['weekdays'] = row.weekdays.map(e => { return { 'id': e, 'weekday': e - 1 } }) console.log("Before session"); session.put(`api/user/schedule/${row.id}/update/`, data).then((resp) => { console.log(resp.data) this.$toastr.Add({ name: "UniqueToastName", title: `Update`, msg: "Schedule updated!", style: { backgroundColor: "#4fd69c", width: "550px" }, progressbar: false, timeout: 3501, }); console.log(row) }).catch(e => { this.$toastr.e(`Error : ${JSON.stringify(e)} `) }) } else { this.$toastr.e("End time should be after start time"); } }, 当我按下图标时，b-modal 会出现，其中包含除天之外的所有元素。我的问题是，当我按下更新按钮时，handleEdit 方法不会被调用，因此结果数据不会更新。我该如何解决这个问题？我在表单关闭之前用这段代码解决了这个问题 <button class="btn btn-primary" type="submit"> Save </button> 现在的问题是我无法更新日子

vue.js vuejs2

回答 1 投票 0

从node_modules导入时Vuejs 2和tinymce无法工作

我正在使用tinymce编辑器，我正在尝试在我的vuejs2项目中创建一个RichTextBox组件。然而，我遇到了一个问题，当尝试导入时，tinymce 所需的导入不起作用...

vue.js webpack vuejs2 tinymce

回答 1 投票 0

vuejs2 相关问题

最新问题