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

如何在 vue.js 中将 12 小时转换为 24 小时？

我是 vue.js 的新手。我写了这段代码：我是 vue.js 新手。我写了这段代码： <li class="list-inline-item me-3"> <h5 class="font-size-14" data-toggle="tooltip" data-placement="top" title="From" > <label>Start time</label> <br /> <i class="bx bx-time me-1 text-muted"> <b-form-input class="no-border" :value="object.start_time.slice(0,5)" :disabled="!object.can_change" @input="object.start_time = $event" format="HH:mm" value-type="format" type="time" placeholder="HH:mm"></b-form-input> </i></h5> </li> 此代码显示时间（小时和分钟）。问题是，上午和下午的时间是 12 小时，但我想要 24 小时。我怎样才能做到这一点？这个和vue.js无关。你可以试试day.js。你可以使用day.js的格式来转换24小时。

vue.js vuejs2

回答 1 投票 0

如何使用vue js从带有服务器端行模型（数据源）的ag-grid获取总行数？

我正在使用ag-grid和vue，以及服务器端行模型。我想显示所有行的计数，不仅是显示的行，而且实际上是数据库中所有行的计数。这个

vue.js vuejs2 ag-grid ag-grid-vue

回答 1 投票 0

Vuex 突变不返回状态的最新值

目前我正在开发一个功能，其中突变 updateConversationBasedOnAssignedUser 更新状态 current_action。 updateConversationBasedOnAssignedUser 使用 Ax 进行异步/等待调用...

vuejs2 vuex

回答 1 投票 0

如何将v-tour中单个按钮的宽度拉伸到100%

我在这里可以实现的这个弹出窗口的最大宽度是250px。现在，我想将按钮拉伸到整个弹出窗口的宽度。下面是我尝试过的一段代码- 我在这里可以实现的弹出窗口的最大宽度是 250px。现在，我想将按钮拉伸到整个弹出窗口的宽度。下面是我尝试过的一段代码- <div slot="actions" style="width: 250px; text-align: left;"> <button @click="signup()" class="btn btn-primary btn-next" style="width: 250px;">Sign up</button> </div> 我的期望- 如果您使用引导程序，请尝试使用“btn-block”类 <div slot="actions" style="width: 250px; text-align: left;"> <button @click="signup()" class="btn btn-primary btn-next btn-block" style="width: 250px;">Sign up</button> </div>

javascript html css vue.js vuejs2

回答 1 投票 0

通过 JS/某些插件更新值时 vue js v-model 中的反应性

我目前在理解 VueJS 的 v-model 反应性如何工作方面遇到一些困难。我有一个选择插件，可以帮助我设置选择字段的样式，但它通过 cou 的 JS 更改选择字段值...

vue.js vuejs2 vue-component

回答 2 投票 0

vuejs2 相关问题

最新问题