vue-component 相关问题

Vuetify 3 |我们如何使用可组合程序以编程方式关闭对话

嗨，我正在 vuetify 3 中进行增删改查，对于创建表单，我使用的是 v-dailog，一旦表单将数据成功保存到服务器，我想关闭 v-dailog。我已经使用可组合性来处理我的所有逻辑。让我

将“默认”图像添加到我的<img>（VUE）

我有一个区域，人们可以上传自己的用户图像。但如果他们不这样做，我想显示一个默认的。 经过一番谷歌搜索后，我发现我可以通过做类似的事情来做到这一点 - 我有一个区域，人们可以上传自己的用户图像。但如果他们不这样做，我想显示一个默认的。 经过一番谷歌搜索后，我发现我可以通过做类似的事情来做到这一点 - <img :src="creatorImage" @error="defaultAvatar"> 但是，我不确定如何创建一个方法来将正确的（默认）图像传递给它。 我用计算属性做到了这一点，如下所示： <template> <img :src="creatorImage" @error="imageError = true"/> </template> <script> ... data() { return { imageError: false, defaultImage: require("@/assets/imgs/default.jpg") }; }, computed: { creatorImage() { return this.imageError ? this.defaultImage : "creator-image.jpg"; } } ... </script> 我建议为此创建一个组件，因为它听起来像是会在更多地方使用的东西。 JsFiddle 示例 组件 Vue.component('img-with-default', { props: ['defaultImg'], data: function () { return { defaultAvatar: this.defaultImg || 'https://cdn0.iconfinder.com/data/icons/crime-protection-people/110/Ninja-128.png' } }, computed:{ userImage: function() { if(this.uploadedImg != null) { return this.uploadedImg; } else { return this.defaultAvatar; } } }, template: '<img :src="userImage">' }) 使用该组件将是 HTML <div id="editor"> <img-with-default></img-with-default> <img-with-default default-img="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-128.png" ></img-with-default> </div> JS new Vue({ el: '#editor' }) 这样您就拥有了默认图像。 如果你愿意，你可以创建一个组件来显示传递的 img src 或默认的。 组件 Vue.component('img-with-default', { props: ['imgSrc'], data: function () { return { imageSource: this.imgSrc || 'https://cdn0.iconfinder.com/data/icons/crime-protection-people/110/Ninja-128.png' } }, template: '<img :src="imageSource">' }) 并使用它 HTML <div id="editor"> <img-with-default></img-with-default> <img-with-default img-src="https://cdn3.iconfinder.com/data/icons/avatars-15/64/_Ninja-2-128.png" ></img-with-default> </div> 以上所有内容都不必要地复杂。这是最简单的方法： <img :src="image||'default.png'" /> 更简单，无需使用 Vue 中的脚本 <img :src="imageUrl || '/image-default.png'" @error="(e) => (e.target.src = '/image-default.png')" />

如何在Vue中使用自定义组件获取数组数据

我将一个数据数组传递给 Vue js 中的自定义组件，并希望将其放入我的模板中定义的组件中，但出现 Missing required prop: "students" 错误。这是我的代码。

Vuelidate $v 在 Vue 组件中未定义

我发现没有任何东西可以解决这个问题。我收到此 Vue 组件的以下错误。我正在尝试使用 Vuelidate 库来验证我的表单。知道我在这里缺少什么吗？ 恩卡...

导入包时，我的 npm pacakge 中的 vue 组件使用的 Tailwind 类不可用

我有以下 Vue 组件： // src/components/CodeBlock.vue 从“vue”导入{ref}； const props = DefineProps({ 值：字符串 }) 常量文本 = 参考(</desc> <question vote="0"> <p>我有以下 Vue 组件：</p> <pre><code>// src/components/CodeBlock.vue &lt;script setup&gt; import { ref } from &#39;vue&#39;; const props = defineProps({ value: String }) const text = ref(null) const copied = ref(false) const copyText = (data) =&gt; { navigator.clipboard.writeText(data); copied.value = true; setTimeout(() =&gt; copied.value = false, 1000) } &lt;/script&gt; &lt;template&gt; &lt;div class=&#34;w-full&#34;&gt; &lt;div class=&#34;relative&#34;&gt; &lt;label for=&#34;npm-install-copy-button&#34; class=&#34;sr-only&#34;&gt;Label&lt;/label&gt; &lt;code ref=&#34;text&#34; class=&#34;col-span-6 bg-gray-50 border border-gray-300 text-gray-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-gray-400 dark:focus:ring-blue-500 dark:focus:border-blue-500&#34; disabled readonly&gt; &lt;slot&gt;{{ props.value }}&lt;/slot&gt; &lt;/code&gt; &lt;button type=&#34;button&#34; @click.prevent=&#34;copyText(text.innerText)&#34; data-tooltip-target=&#34;tooltip-copy-npm-install-copy-button&#34; class=&#34;absolute end-2 bottom-1 translate-y-1 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg p-1 mb-1 inline-flex items-center justify-center hover:text-gray-900 dark:hover:text-white&#34;&gt; &lt;span id=&#34;default-icon&#34; v-if=&#34;!copied&#34;&gt; &lt;svg class=&#34;w-3.5 h-3.5&#34; aria-hidden=&#34;true&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; fill=&#34;currentColor&#34; viewBox=&#34;0 0 18 20&#34;&gt; &lt;path d=&#34;M16 1h-3.278A1.992 1.992 0 0 0 11 0H7a1.993 1.993 0 0 0-1.722 1H2a2 2 0 0 0-2 2v15a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2Zm-3 14H5a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0-4H5a1 1 0 0 1 0-2h8a1 1 0 1 1 0 2Zm0-5H5a1 1 0 0 1 0-2h2V2h4v2h2a1 1 0 1 1 0 2Z&#34;/&gt; &lt;/svg&gt; &lt;/span&gt; &lt;span id=&#34;success-icon&#34; class=&#34;inline-flex items-center&#34; v-if=&#34;copied&#34;&gt; &lt;svg class=&#34;w-3.5 h-3.5 text-blue-700 dark:text-blue-500&#34; aria-hidden=&#34;true&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; fill=&#34;none&#34; viewBox=&#34;0 0 16 12&#34;&gt; &lt;path stroke=&#34;currentColor&#34; stroke-linecap=&#34;round&#34; stroke-linejoin=&#34;round&#34; stroke-width=&#34;2&#34; d=&#34;M1 5.917 5.724 10.5 15 1.5&#34;/&gt; &lt;/svg&gt; &lt;/span&gt; &lt;/button&gt; &lt;div id=&#34;tooltip-copy-npm-install-copy-button&#34; role=&#34;tooltip&#34; class=&#34;absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700&#34;&gt; &lt;span id=&#34;default-tooltip-message&#34;&gt;Copy to clipboard&lt;/span&gt; &lt;span id=&#34;success-tooltip-message&#34; class=&#34;hidden&#34;&gt;Copied!&lt;/span&gt; &lt;div class=&#34;tooltip-arrow&#34; data-popper-arrow&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/template&gt; </code></pre> <p>我的 npm 包的 <pre><code>package.json</code></pre> 看起来像这样：</p> <pre><code>{ &#34;name&#34;: &#34;@pioneer-dynamics/code-block&#34;, &#34;description&#34;: &#34;A simple way to disaply a block of code that has a click to copy option.&#34;, &#34;version&#34;: &#34;1.0.0&#34;, &#34;author&#34;: &#34;Mathew Paret &lt;<a href="/cdn-cgi/l/email-protection" data-cfemail="4e232f3a262b393e2f3c2b3a0e29232f2722602d2123">[email protected]</a>&gt;&#34;, &#34;license&#34;: &#34;MIT&#34;, &#34;main&#34;: &#34;src/components/CodeBlock.vue&#34;, &#34;dependencies&#34;: { &#34;vue&#34;: &#34;^3.0.0&#34; }, &#34;browserslist&#34;: [ &#34;&gt; 1%&#34;, &#34;last 2 versions&#34;, &#34;not ie &lt;= 8&#34; ] } </code></pre> <p>当我在没有 npm 模块的情况下使用此组件时（即将 .vue 文件复制到我的使用项目的文件夹 [不在 node_modules 内]，UI 将按预期呈现）。</p> <pre><code>import CodeBlock from &#39;@/Components/CodeBlock.vue&#39;; </code></pre> <p><a href="https://i.sstatic.net/UoQOHkED.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvVW9RT0hrRUQucG5n" alt="When used directly, not from npm pacakge"/></a></p> <p>当我使用 NPM 模块中的组件时，UI 看起来很糟糕。</p> <pre><code>import CodeBlock from &#39;@pioneer-dynamics/code-block </code></pre> <p><a href="https://i.sstatic.net/JlFKOp2C.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvSmxGS09wMkMucG5n" alt="When used from npm pacakge"/></a></p> <p>如何修复用户界面！？</p> <p>创建了一个我将在多个项目中使用的 vue 组件，将其移动到 NPM 包并尝试将其导入到使用的项目中。</p> <p>预期的 UI 和功能相同。</p> <p>UI 似乎没有按预期工作，但功能按预期工作。</p> </question> <answer tick="false" vote="0"> <p>听起来您还没有将软件包的代码添加到您的 Tailwind 配置中。考虑将以下路径添加到 Tailwind 配置中的 <pre><code>content</code></pre> 数组：</p> <pre><code>module.exports = { content: [ … &#39;node_modules/@pioneer-dynamics/code-block/src/components/CodeBlue.vue&#39;, </code></pre> </answer> </body></html>

Vue 2 渲染函数 - 非作用域插槽

渲染函数的文档给出了如何从模板转换作用域 v-slot 的示例 {{ props.text }} 渲染函数的文档给出了如何从模板转换范围v-slot的示例 <div><child v-slot="props"><span>{{ props.text }}</span></child></div> 渲染函数： render: function (createElement) { return createElement('div', [ createElement('child', { // pass `scopedSlots` in the data object // in the form of { name: props => VNode | Array<VNode> } scopedSlots: { default: function (props) { return createElement('span', props.text) } } }) ]) } 但是，如果 v-slot 没有作用域怎么办？如果您尝试转换的模板是这样的怎么办 <div><child v-slot:slotName><span>...</span></child></div> （我还使用了一个名为 slotName 的非默认插槽） 这取决于 Vue 2 版本。从 2.6.0+ 开始，Vue 对所有插槽都一视同仁，将它们暴露在 scopedSlots 上，无论它们是否有作用域。 所有 $slots 现在也作为函数公开在 $scopedSlots 上。如果您使用渲染函数，现在建议始终通过 $scopedSlots 访问插槽，无论它们当前是否使用作用域。这不仅会使未来添加范围的重构变得更简单，而且还可以简化您最终迁移到 Vue 3 的过程，其中所有插槽都将是函数。 所以这应该有效： render: function (createElement) { return createElement('div', [ createElement('child', { // pass `scopedSlots` in the data object // in the form of { name: props => VNode | Array<VNode> } scopedSlots: { slotName: function (props) { // or function () return createElement('span', props.text) } } }) ]) } 演示

Vue 2 to 3升级：简化复选框问题组件

我有一个在 Vue 2 中制作的复选框表单问题组件，我正在迁移到 Vue 3，因此希望尽可能简化它，并确保我已经利用了 Vue 3 的所有新功能。 一个...

我没有 VueRouter 或来自“vue-router”的路由器

我不知道如何在 vue 中制作网络路由器，因为我是初学者，所以在每个教程中，我看到他们从“vue-router”导入 router 或 vuerouter 我已经尝试过什么？我运行了 npm install vue-...

在 TSX 文件中找不到全局组件！ Vue3 + vite + TS

1。使用Vite.js初始化项目 pnpm 创建 vite √ 项目名称：...演示 √ 选择一个框架： » Vue √ 选择一个变体： » 使用 create-vue 进行自定义 ↗ $ Vue.js - 渐进式 JavaScript

是否可以在单个文件组件中使用v-slot？

我正在使用vue3 ComponentA.vue 只需使用模板即可。 ... 我正在使用vue3 组件A.vue <template> <slot name="label"></slot> <slot></slot> </template> 只需使用模板即可。 <template> <ComponentA> <template #label> label </template > <template #default> content </template > </ComponentA> </template> 有什么办法可以将两个模板提取到一个组件中吗？ 喜欢 <template> <ComponentA> <ComponentB /> </ComponentA> </template> ComponentA 是库的组件，所以我无法修改它。 这不是工作。 v 槽必须由自定义元素拥有。 组件B.vue <template> <template #label> label </template > <template #default> content </template > </template> 根据我对你问题的理解： 是的，您可以将单文件组件传递到插槽中。 vue 文档中有一个示例，其中 FancyButton 是带有插槽的父组件，AwesomeIcon 是自定义单文件组件：https://vuejs.org/guide/components/slots <FancyButton> <span style="color:red">Click me!</span> <AwesomeIcon name="plus" /> </FancyButton> 对于你的例子来说，它正是 <template> <ComponentA> <ComponentB /> </ComponentA> </template> 其中 ComponentB 将位于 ComponentA 的默认槽中。当然，如果需要的话，ComponentB 可能有自己的插槽。 我没有检查过，但是如果你需要将组件传递到命名插槽中，则需要添加 v-slot:label，如标签中那样 <ComponentB v-slot:label/> 我可能是错的，但这就是我理解文档的方式。

如何使用vueJS显示内部数组中的JSON数据？

我的vueJS代码是： 新的Vue({ el: '#feed' , 数据： { 数据： []， }, 安装（）{ this.$nextTick(函数() { var self = this; var id = 窗口。</desc> <question vote="0"> <p>我的vueJS代码是：</p> <pre><code>&lt;script&gt; new Vue({ el: &#39;#feed&#39; , data: { data: [], }, mounted() { this.$nextTick(function() { var self = this; var id = window.location.href.split(&#39;=&#39;).pop(); console.log(id); $.ajax({ url: &#34;https://n2s.herokuapp.com/api/post/get/5&#34;, method: &#34;GET&#34;, dataType: &#34;JSON&#34;, success: function (e) { if (e.status == 1) { self.data = e.data; console.log(e.data) } else { console.log(&#39;Error occurred&#39;); } }, error: function(){ console.log(&#39;Error occurred&#39;); } }); }); }, }) &lt;/script&gt; </code></pre> <p>这是我显示值的html代码</p> <pre><code>&lt;div class=&#34;m-single-article&#34; id=&#34;feed&#34;&gt; &lt;p&gt;{{details.businessName}}&lt;/p&gt; //already printed &lt;p&gt;{{details.pid}}&lt;/p&gt; //already printed &lt;p&gt;{{details.inventory}}&lt;/p&gt; //////NOT PRINTING &lt;p&gt;{{details.sub_category}}&lt;/p&gt; ////// NOT PRINTING &lt;/div&gt; </code></pre> <p>我能够打印除库存和子类别之外的所有数据。请</p> <p>该 url 将提供 json 数据：</p> <pre><code>{&#34;status&#34;: true, &#34;data&#34;: {&#34;pid&#34;: 10, &#34;businessName&#34;: &#34;Ey technology&#34;, &#34;services&#34;: &#34;1, 3, 4, 2&#34;, &#34;inventory&#34;: [&#34;specs&#34;, &#34;Eye Testing&#34;, &#34;Lens&#34;, &#34;Doctors&#34;], &#34;workHr&#34;: &#34;Monday :9:00AM to 5:00PM,Thuesday :9:00AM to 5:00PM,Wednesday :9:00AM to 5:00PM,Tuesday : 9:00AM to 5:00PM,Friday :9:00AM to 5:00PM,Saturday :9:00AM to 5:00PM,Sunday :9:00AM to 5:00PM&#34;, &#34;description&#34;: &#34;Good technology company for software&#34;, &#34;category&#34;: 1, &#34;sub_category&#34;: [&#34;Homeo pathy&#34;, &#34;Web development&#34;], &#34;lat&#34;: 9.5274336, &#34;lon&#34;: 76.8224309, &#34;contactName&#34;: &#34;simon&#34;, &#34;contactEmail&#34;: &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="25564c484a4b654248444c490b464a48">[email protected]</a>&#34;, &#34;contactOfficeAddress&#34;: &#34;korno solutions&#34;, &#34;contactNumber&#34;: &#34;1236547859&#34;, &#34;contactOfficeNumber&#34;: &#34;858547896&#34;, &#34;state&#34;: &#34;Canada&#34;, &#34;city&#34;: &#34;Oranto&#34;, &#34;place&#34;: &#34;Orania&#34;, &#34;pincode&#34;: 895621, &#34;referer&#34;: 24, &#34;link&#34;: 24, &#34;views&#34;: 0, &#34;package&#34;: 1, &#34;listing_pic&#34;: &#34;default&#34;, &#34;website&#34;: &#34;www.ey.com&#34;}} </code></pre> <p>通过尝试此操作，我无法显示库存 [] 和子类别 [] 的值。有人可以帮我解决我的问题吗？</p> <p>我还获得 1、2、3、4 等服务。有没有办法映射到另一个给出服务名称的 json 数据。 <a href="https://n2s.herokuapp.com/api/post/get_all_services/" rel="nofollow noreferrer">https://n2s.herokuapp.com/api/post/get_all_services/</a></p> </question> <answer tick="false" vote="1"> <p>您需要<a href="https://v2.vuejs.org/v2/guide/list.html" rel="nofollow noreferrer">v-for</a>。 </p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>new Vue({ el: &#39;#feed&#39; , data: { details: [], }, mounted() { this.$nextTick(function() { var self = this; var id = window.location.href.split(&#39;=&#39;).pop() console.log(id) $.ajax({ url: &#34;https://n2s.herokuapp.com/api/post/get/5&#34;, method: &#34;GET&#34;, dataType: &#34;JSON&#34;, success: function (e) { if (e.status == 1) { self.details = e.data; console.log(e.data) } else { console.log(&#39;Error occurred&#39;);} }, error: function(){ console.log(&#39;Error occurred&#39;); } }); }) }, })</code></pre> <pre><code>&lt;script src=&#34;https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js&#34;&gt;&lt;/script&gt; &lt;script src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;div class=&#34;m-single-article&#34; id=&#34;feed&#34;&gt; &lt;p&gt;{{details.businessName}}&lt;/p&gt; &lt;p&gt;{{details.pid}}&lt;/p&gt; &lt;p v-for=&#34;inv in details.inventory&#34;&gt;{{inv}}&lt;/p&gt; &lt;p v-for=&#34;sub in details.sub_category&#34;&gt;{{sub}}&lt;/p&gt; &lt;/div&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

如何使用vue js通过ajax请求获取的json数据在谷歌地图上标记经纬度？

这是我的vue js脚本，使用ajax请求获取json数据 新的Vue({ el: '#feed' , 数据： { 细节： []， }, 安装（）{ this.$nextTick(函数() { ...</desc> <question vote="2"> <p>这是我的vue js脚本，使用ajax请求获取json数据</p> <pre><code> &lt;script&gt; new Vue({ el: &#39;#feed&#39; , data: { details: [], }, mounted() { this.$nextTick(function() { var self = this; var id = window.location.href.split(&#39;=&#39;).pop() console.log(id) $.ajax({ url: &#34;https://&#34;, method: &#34;GET&#34;, dataType: &#34;JSON&#34;, success: function (e) { if (e.status == 1) { self.details = e.data; console.log(e.data) } else { console.log(&#39;Error occurred&#39;);} }, error: function(){ console.log(&#39;Error occurred&#39;); } }); }) }, }) &lt;/script&gt; &lt;script&gt; export default { name: &#39;google-map&#39;, props: [&#39;name&#39;], data: function () { return { mapName: this.name + &#34;-map&#34;, markerCoordinates: [{ latitude: 51.501527, longitude: -0.1921837 }], map: null, bounds: null, markers: [] } }, mounted: function () { this.bounds = new google.maps.LatLngBounds(); const element = document.getElementById(this.mapName) const mapCentre = this.markerCoordinates[0] const options = { center: new google.maps.LatLng(mapCentre.latitude, mapCentre.longitude) } this.map = new google.maps.Map(element, options); this.markerCoordinates.forEach((coord) =&gt; { const position = new google.maps.LatLng(coord.latitude, coord.longitude); const marker = new google.maps.Marker({ position, map: this.map }); this.markers.push(marker) this.map.fitBounds(this.bounds.extend(position)) }); } }; &lt;/script&gt; &lt;style scoped&gt; .google-map { width: 800px; height: 600px; margin: 0 auto; background: gray; } &lt;/style&gt; </code></pre> <p>我收到错误 Uncaught SyntaxError: Unexpected token export.. 我不知道如何解决同样的问题。请帮我解决</p> <p>这是我的 html 代码，用于显示所有 JSON 数据</p> <pre><code>&lt;div class=&#34;m-single-article&#34; id=&#34;feed&#34;&gt; &lt;p&gt;{{details.businessName}}&lt;/p&gt; &lt;p&gt;{{details.pid}}&lt;/p&gt; &lt;p v-for=&#34;inv in details.inventory&#34;&gt;{{inv}}&lt;/p&gt; &lt;p v-for=&#34;sub in details.sub_category&#34;&gt;{{sub}}&lt;/p&gt; &lt;div class=&#34;google-map&#34; :id=&#34;mapName&#34;&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>但是我遇到了错误。谁能帮我解决我的问题。我怎样才能让纬度和经度显示在谷歌地图上。我是 vue js 的初学者。请帮我解决这个问题。</p> <p>还有其他方法可以使用谷歌地图 API 解决同样的问题吗？请帮助我找到解决方案 我的js小提琴链接不添加谷歌地图是<a href="https://jsfiddle.net/kzc26bgs/1/" rel="nofollow noreferrer">https://jsfiddle.net/kzc26bgs/1/</a></p> </question> <answer tick="true" vote="2"> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code>function initMap() { var c = [{&#34;status&#34;: true, &#34;data&#34;: {&#34;pid&#34;: 5, &#34;businessName&#34;: &#34;Xavier Tailoring shop&#34;, &#34;services&#34;: &#34;All kind of stitching works&#34;, &#34;inventory&#34;: [], &#34;workHr&#34;: &#34;Monday :9:00AM to 20:0PM,Thuesday :9:00AM to 20:0PM,Wednesday :9:00AM to 20:0PM,Tuesday : 9:00AM to 20:0PM,Friday :9:00AM to 20:0PM,Saturday :9:00AM to 20:0PM,Sunday :9:00AM to 20:0PM&#34;, &#34;description&#34;: &#34;All kind of stitching works&#34;, &#34;category&#34;: 11, &#34;sub_category&#34;: [&#34;Veg Hotel&#34;], &#34;lat&#34;: 9.52436859, &#34;lon&#34;: 76.82810117, &#34;contactName&#34;: &#34;xavier&#34;, &#34;contactEmail&#34;: &#34;<a href="/cdn-cgi/l/email-protection" data-cfemail="82eae3f0ebf1fae3f4ebe7f0c2e5efe3ebeeace1edef">[email protected]</a>&#34;, &#34;contactOfficeAddress&#34;: &#34;koovapally perubara road&#34;, &#34;contactNumber&#34;: &#34;8592808201&#34;, &#34;contactOfficeNumber&#34;: &#34;8592808201&#34;, &#34;state&#34;: &#34;Kerala&#34;, &#34;city&#34;: &#34;Koovappally&#34;, &#34;place&#34;: &#34;Kanjirapally - Erumely Road&#34;, &#34;pincode&#34;: 686518, &#34;referer&#34;: 24, &#34;link&#34;: 31, &#34;views&#34;: 0, &#34;package&#34;: 1, &#34;listing_pic&#34;: &#34;default&#34;, &#34;website&#34;: &#34;example.com&#34;}}]; var myLatLng = {lat:c[0].data.lat , lng:c[0].data.lon }; var map = new google.maps.Map(document.getElementById(&#39;mapName&#39;), { zoom: 4, center: myLatLng }); var marker = new google.maps.Marker({ position: myLatLng, map: map, title: &#39;Hello World!&#39; }); }</code></pre> <pre><code>&lt;div id=&#34;mapName&#34; style=&#34;width:267px; height: 270px&#34; /&gt; &lt;!-- Replace the value of the key parameter with your own API key. --&gt; &lt;script async defer src=&#34;https://maps.googleapis.com/maps/api/js?key=AddKEY&amp;callback=initMap&#34;&gt; &lt;/script&gt;</code></pre> </div> </div> <p></p> <pre><code>var options = { zoom: 6, center: new google.maps.LatLng(12.92, 77.25), // Centered mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: false }; // Init map var map = new google.maps.Map(document.getElementById(&#39;dvMap&#39;), options); $.post(&#34;${pageContext.request.contextPath}/getorderlist.htm&#34;, { aa : aa, output : output, }, function(data) { }).done(function(data) { //alert(data); var json = JSON.parse(data); //console.log( json); for (var i = 0; i &lt; json.length; i++) { var png=&#39;http://maps.google.com/mapfiles/ms/icons/blue-dot.png&#39;; // Init markers var marker = new google.maps.Marker({ position: new google.maps.LatLng(json[i].lat , json[i].lon), map: map, title: &#39;Click Me &#39; + i, icon:png }); // Process multiple info windows (function(marker, i) { // add click event google.maps.event.addListener(marker, &#39;click&#39;, function() { infowindow = new google.maps.InfoWindow({ content: json[k][i].address }); infowindow.open(map, marker); }); })(marker, i); } }).fail(function(xhr, textStatus, errorThrown) { }).complete(function() { $(&#34;#btn-save&#34;).prop(&#34;disabled&#34;, false); }); </code></pre> </answer> </body></html>

如何在vue js中对每个搜索结果使用modal来显示google地图上json数据获取的经纬度？

我有以下 json 数据的搜索结果。每个搜索结果都有纬度和经度。因此，对于每个搜索结果，当我单击查看地图时，都会弹出一个模式并显示标记...

Vue 警告：无法解析组件

希望你一切都好。我目前在使用父组件内的组件时遇到一些问题。我尝试了一些事情但没有成功...... 组件 ModalBoxActionArticle d...

更新/删除递归子组件

我有一个应用程序需要遍历并显示类似于文件系统的目录结构。下面是一个示例，说明它如何与文件系统一起工作。 应用程序.vue 导入</desc> <question vote="0"> <p>我有一个应用程序需要遍历并显示类似于文件系统的目录结构。下面是一个示例，展示了它如何与文件系统一起工作。</p> <p>应用程序.vue</p> <pre><code>&lt;script setup&gt; import ListItem from &#39;./components/ListItem.vue&#39;; const data = { &#39;C:/&#39;: { &#39;users/&#39;: { &#39;testUser/&#39;: { &#39;documents/&#39;: {}, }, }, &#39;windows/&#39;: { &#39;system32&#39;: {}, }, }, &#39;E:/&#39;: { &#39;test/&#39;: {}, }, }; &lt;/script&gt; &lt;template&gt; &lt;div style=&#34;display: flex; flex-direction: column&#34;&gt; &lt;h1&gt;Recursive Directory Browser&lt;/h1&gt; &lt;ListItem title=&#34;Browse&#34; :items=&#34;data&#34; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;style scoped&gt;&lt;/style&gt; </code></pre> <p>ListItem.vue</p> <pre><code>&lt;script setup&gt; import { defineProps, ref, nextTick } from &#39;vue&#39;; const props = defineProps({ title: { type: String, required: true, }, items: { type: Object, required: true, }, }); const selectedName = ref(); const selectedValue = ref(); async function updateSelected(key, value) { selectedName.value = key; selectedValue.value = value; } &lt;/script&gt; &lt;template&gt; &lt;div style=&#34;border: 2px solid black; margin: 1em; padding: .25em;&#34;&gt; &lt;h2&gt;{{ title }}&lt;/h2&gt; &lt;div style=&#34;display: flex; flex-direction: row;&#34;&gt; &lt;template v-for=&#34;(value, key) in items&#34;&gt; &lt;button @click=&#34;updateSelected(key, value)&#34;&gt;{{ key }}&lt;/button&gt; &lt;/template&gt; &lt;/div&gt; &lt;/div&gt; &lt;template v-if=&#34;selectedName&#34;&gt; &lt;ListItem :title=&#34;selectedName&#34; :items=&#34;selectedValue&#34; /&gt; &lt;/template&gt; &lt;/template&gt; &lt;style scoped&gt;&lt;/style&gt; </code></pre> <p>此代码生成的应用程序如下所示：</p> <p><a href="https://i.sstatic.net/65IyDxyB.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvNjVJeUR4eUIucG5n" alt="example directory browser"/></a></p> <p>问题在于，这里存在一个错误，用户可以将目录遍历几层，然后如果用户导航回父目录上的不同节点，则已探索路径的子组件将保留。</p> <p><a href="https://i.sstatic.net/2YPzKfM6.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvMllQektmTTYucG5n" alt="example directory browser bug result"/></a></p> <p>我通过在 <pre><code>updating</code></pre> 组件上添加一个名为 <pre><code>ListItem</code></pre> 的 prop/ref 并在对 <pre><code>nextTick()</code></pre> 的调用之间切换来解决这个问题。</p> <p>ListItem.vue 使用 prop + 组件和 <pre><code>nextTick()</code></pre></p> <pre><code>&lt;script setup&gt; import { defineProps, ref, nextTick } from &#39;vue&#39;; const props = defineProps({ title: { type: String, required: true, }, items: { type: Object, required: true, }, updating: { type: Boolean, required: false, default: false, }, }); const updating = ref(props.updating); const selectedName = ref(); const selectedValue = ref(); async function updateSelected(key, value) { updating.value = true; await nextTick(); selectedName.value = key; selectedValue.value = value; updating.value = false; } &lt;/script&gt; &lt;template&gt; &lt;div style=&#34;border: 2px solid black; margin: 1em; padding: .25em;&#34;&gt; &lt;h2&gt;{{ title }}&lt;/h2&gt; &lt;div style=&#34;display: flex; flex-direction: row;&#34;&gt; &lt;template v-for=&#34;(value, key) in items&#34;&gt; &lt;button @click=&#34;updateSelected(key, value)&#34;&gt;{{ key }}&lt;/button&gt; &lt;/template&gt; &lt;/div&gt; &lt;/div&gt; &lt;template v-if=&#34;selectedName &amp;&amp; !updating&#34;&gt; &lt;ListItem :title=&#34;selectedName&#34; :items=&#34;selectedValue&#34; :updating=&#34;updating&#34; /&gt; &lt;/template&gt; &lt;/template&gt; &lt;style scoped&gt;&lt;/style&gt; </code></pre> <p><a href="https://stackblitz.com/edit/vitejs-vite-74mppmme?embed=1&file=src%2FApp.vue" rel="nofollow noreferrer">StackBlitz 示例</a></p> <p>有没有更好的解决方案，不依赖<pre><code>nextTick()</code></pre>并且添加组件+prop？</p> </question> <answer tick="false" vote="0"> 当重新分配组件层次结构的数据时，<p><pre><code>updating</code></pre> 标志强制重新安装 <pre><code>ListItem</code></pre>，这是一种解决方法。惯用的方法是使用唯一键，在本例中就是数据本身：</p> <pre><code> &lt;template v-if=&#34;selectedName&#34;&gt; &lt;ListItem :key=&#34;selectedValue&#34; :title=&#34;selectedName&#34; :items=&#34;selectedValue&#34; /&gt; </code></pre> </answer> </body></html>

本地注册出错

我使用 vue 2 生成了一个新项目，然后我想应用本地注册，但出现编译错误 错误截图 以下显示了更改文件： main.js 导入 Vue

有没有办法去掉vue组件中grapesjs编辑器的AssetManager的“添加图片”按钮

我想删除“添加图像”按钮及其文本框。有没有办法通过设置 assetManager 的配置或其他方式来做到这一点？ this.editor = 新的grapesjsEditor.init({

vue“内部错误：递归过多”

我尝试将 Chart.js 作为 vue 组件嵌入到我的应用程序中。 当我尝试将新数据添加到图表数据集时，我收到错误： 未捕获的内部错误：递归过多 推送反应性.esm-bu...

Vue.js 中多表的条件渲染

我正在构建一个 Vue.js 应用程序，需要根据某些条件有条件渲染多个表。我有一组标志来确定应呈现哪些表，并且我

动态 v 模型修改器？

Vue 具有 v 模型修饰符，例如数字： 我正在编写一个抽象 Field 组件，它包装输入，并且可能需要选择包含 mod...