为什么@googlemaps/js-api-loader的自动完成数据不能通过v-model绑定传递给数据对象？
@googlemaps/js-api-loader是一个用于加载Google Maps JavaScript API的库。根据提供的问答内容，问题是为什么自动完成数据不能通过v-model绑定传递给数据对象。
首先，需要明确的是，v-model是Vue.js框架中用于双向数据绑定的指令，它可以将表单元素的值与Vue实例中的数据进行绑定。然而，v-model只能用于表单元素，而不能直接用于非表单元素或自定义组件。
@googlemaps/js-api-loader库提供的自动完成数据可能是一个非表单元素或自定义组件，因此无法直接通过v-model进行绑定。如果想要将自动完成数据传递给数据对象，可以考虑使用其他方式来实现。
一种可能的解决方案是使用事件监听器来捕获自动完成数据的变化，并将其更新到数据对象中。可以通过监听自动完成组件的change事件或者使用自定义事件来实现。具体的实现方式取决于使用的自动完成组件的API和功能。
另外，如果想要在Vue.js中使用Google Maps相关功能，可以考虑使用vue-google-maps等第三方库，它们提供了更好的集成和使用方式，可以更方便地与Vue实例进行交互。
总结起来，无法直接通过v-model绑定传递自动完成数据给数据对象，需要使用其他方式来实现数据的更新。具体的解决方案取决于使用的自动完成组件和相关库的API和功能。
相关·内容
我的Vue CLI项目使用Google Maps API来处理来自用户输入的位置。加载程序按如下方式导入： import { Loader } from "@googlemaps/js-api-loader"; 并且，它是这样实例化的： const loader = new Loader({
apiKey: "XXXXX",
version: "weekly",
libraries: ["places"]
}); 我有一个文本输入元素，它接受来自用户的位置： <input type="text"
浏览 87提问于2021-04-11得票数 0
我有一个使用Google API的Vue CLI项目。我使用以下代码导入加载程序：
import { Loader } from "@googlemaps/js-api-loader";
之后，我定义了加载程序，如下所示：
const loader = new Loader({
apiKey: "XXXXX",
version: "weekly",
libraries: ["places"]
});
现在，当我试图使用google.maps.Map对象显示地图时，我会看到一个错误，说明'google‘是没有定义
浏览 6提问于2021-02-26得票数 3
回答已采纳
5回答
我正在通过一个在线课程学习Vue，老师给了我一个练习，让我用默认值输入文本。我是用v-model完成的，但是，老师选择了v-bind:value，我不明白为什么。
有没有人能给我一个简单的解释，说明这两者之间的区别，以及什么时候使用它们更好？
浏览 4提问于2017-02-16得票数 314
通过引用@types/foo，我们可以在TypeScript代码中使用JavaScript库的功能。但是为什么呢？它只定义了一组数据类型和接口，但是实际的逻辑仍然在JS代码中。如果不包含原始的JS库，代码如何运行？
例如，为了在TypeScript中实现地图服务，我们只包含没有JS库googlemaps的@types/googlemaps。为什么会这样呢？
浏览 0提问于2017-12-18得票数 2
回答已采纳
我试图将将数据导入到Maps ()示例复制到我的角度项目中，但是我在控制台中得到了以下错误：
earthquake_GeoJSONP.js:1 Uncaught ReferenceError: eqfeed_callback is not defined
at earthquake_GeoJSONP.js:1:1
app.component.ts
import { Component, OnInit } from '@angular/core';
import { Loader } from "@googlemaps/js-api-loader"
@C
浏览 4提问于2022-06-01得票数 0
1回答
请帮帮我，我是惯性的新手，我正计划用vuetify创建用户crud页面，但我被困在这里了。 我的问题是，由于vuetify中没有tr/ td标记，我如何将用户数据从后端分配到datatable中？ 我已经尝试过在互联网上搜索，但大多数教程都是使用tailwindcss。 < script >
export default {
data: () => ({
dialog: false,
dialogDelete: false,
headers: [{
text: 'Name',
浏览 15提问于2021-01-03得票数 2
我得到了“找到一个意外的马赫-O头代码: 1918975009”警告，同时存档的项目。我正在使用GoogleMaps框架并复制GoogleMaps.Bundle来复制Bundle参考资料。
提到，我试着从复制包资源中删除二进制文件，但是应用程序会出现崩溃提示异常：*由于未登录的异常“GMSException”而终止应用程序，原因是：“Google for iOS需要GoogleMaps.bundle作为”复制捆绑资源“下的目标的一部分，如果我在哪里出错，请帮助。
浏览 2提问于2016-05-11得票数 0
回答已采纳
我有一个JSON对象，我希望用户编辑.
当我像{{json}}一样清晰地打印它时，我会得到字符串{"car":{"color":"blue"}}。但是当我在任何类型的可编辑字段中打印它时，就像
<input v-model="json">
我明白了：
我尝试过的事物：
html:v-model / html:value -空输入
<textarea v-model="json">{{json}}</textarea> -我得到了[object Object]，但
浏览 0提问于2018-11-09得票数 1
回答已采纳
2回答
请参见以下vue/nuxt组件示例：
<template>
<my-component v-model="selected" :options="options" />
</template>
<script>
export default {
props: {
currentSelected: Array,
options: Array
},
data() {
return {
selected: this.
浏览 2提问于2020-01-07得票数 2
回答已采纳
2回答
我想在DevExtreme数据网格中使用CSwitch。有了DxSwitch，一切都能正常工作，但我不能让它在CSwitch上工作。我想，我使用了错误的绑定，不是吗？ <template #width-settings="cell">
<div>
<DxSwitch v-model="cell.data.data.width.set" /> <!-- WORKS -->
<input type="checkbox" v-model="cell.
浏览 25提问于2020-03-23得票数 0
在我的Vue 3.0.5应用程序中，我希望通过单选按钮在<div>元素之间切换，即一次只显示一个元素。如果我在输入元素中的value参数前面加上了v-bind，虽然我已经用v-model赋值了，那么它就能工作。但是，我不明白为什么。
我还使用单选按钮来选择升序/降序(我实现了一个用于排序的computed函数，该函数使用了asc/desc的变量)：这在没有v-bind的情况下有效。
我不清楚为什么这种行为是不同的。有人能解释吗？
使用v-bind的示例
<!DOCTYPE html>
<html>
<head>
<script
浏览 1提问于2021-02-11得票数 0
回答已采纳
我刚刚开始在Jest和Vue测试Utils的帮助下进行Vue测试。
我试图在Jest测试文件中挂载一个名为DateComponent.vue的组件，但是在运行测试时它会抛出一个错误
TypeError: Cannot read property 'key' of undefined
安装其他组件似乎很好，我可以毫无问题地测试它们，但这个组件似乎有一些问题。
<template>
<v-menu
v-model="dateMenu"
:close-on-content-click="false"
浏览 3提问于2020-12-04得票数 1
回答已采纳
我一直在阅读关于v-model的文章，但到目前为止，这些教程令人困惑，也没有真正回答我的问题:如何使用v-model实现双向数据绑定
我需要将一个数据变量绑定到子组件，并且能够同时从父级和子级更改变量的值。我需要在子组件中放入什么代码，以便在执行<Component v-model="var">时，可以从两端更新var？
为此，我倾向于避免存储模式，因为它只是两个需要共享数据的组件。
浏览 1提问于2019-03-07得票数 1
2回答
我是新来的反应和谷歌地图。我使用将Google集成到我的React应用程序中。我成功地加载了地图并添加了标记。
但是，当我试图添加SearchBox时，我得到了一个错误。我跟踪了这里的文档和问题线程。但我还是会搞错的。这个代码有什么问题？
这是我的密码
App.js
import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';
import './App.css';
import Driver from './Dr
浏览 1提问于2020-04-10得票数 6
回答已采纳
我有个问题。当我没有在Vue实例的数据中定义变量a时，它不会更新以匹配新值。
<div id="app">
<p>{{ a }}</p><br>
<input type="text" v-model="a">
</div>
new Vue({
el: "#app",
data: {
},
})
但是当我在数据中使用form时，它是有效的。为什么会有这样的差异呢？
<div id="app">
<p&g
浏览 37提问于2018-07-06得票数 2
回答已采纳
1回答
我创建了一个做了大量工作的组件：
从API 接收数据，使用此数据填充大量输入，管理表单提交，在输入中处理API post。
所以这个组件可以工作，但是我想分成几个小的组件，我的想法是：
ViewForm:从API接收数据并传递给子组件。提交表单进行call.SubFormA:发布，显示一组与“A节”相关的输入，并填充来自ViewForm.SubFormB:的道具，但使用“B节”可以更多地使用subForms.
viewForm
<template>
<sub-form-a v-model="formA"></sub-form-a>
&
浏览 7提问于2022-03-28得票数 0
Vue JS2的后续版本抱怨在按钮上使用v-model。它显示错误： <button v-model="settings.primary_color">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component. 这是我的按钮： <button type=&#
浏览 151提问于2020-11-04得票数 0
我在vuetify中创建了一个下拉菜单，如下所示：
`
<v-menu offset-y>
<template v-slot:activator="{ on }">
<v-btn text v-on="on">
Details
</v-btn>
</template>
<v-l
浏览 2提问于2020-03-26得票数 0
回答已采纳
我正在尝试开发一个系统，它将向用户展示GoogleMaps计算出来的路由。我可以通过googlemaps API获得路线。系统将发送用户输入的API位置，因此这些点将是信天翁。
我目前的地图显示系统是使用goompy。这是通过提取设置位置的瓷砖，然后在平纹帆布上显示它们来实现的。如何提取路径覆盖的瓷砖？
如果不可能使用goompy，你能给我指明正确的方向吗？
谢谢
浏览 2提问于2018-02-17得票数 1
回答已采纳
当我试图在我的JSON对象中分配一个属性名时，在Web控制器上的POST方法参数中填充C#对象的一些JSON数据有问题。
下面是我的API控制器：
[HttpPost]
public HttpResponseMessage MyResource(MyComplexClass myClass)
{
var test = myClass.Name;
return Request.CreateResponse(HttpStatusCode.Created);
}
这是MyComplexClass
public class MyComplexClass
{
public st
浏览 3提问于2018-03-13得票数 1
回答已采纳
1回答
以下是我的嵌入式代码：
HTML：
<div id="user-panel">
<div class="text-center">
{{ fillItem }}
</div>
<form method="POST" action="http://site5/user_account/experiences/17" accept-charset="UTF-8" v-on:submit.prevent="
浏览 21提问于2017-07-31得票数 0
我想用以下方式创建一个具有v-for指令的items对象：
<v-row v-for="(item, index) in items" v-bind:key="index">
<v-col cols="12" md="4">
<v-autocomplete
v-model="item.product_uid"
:items="product_list"
浏览 5提问于2020-01-19得票数 2
回答已采纳
我的视图刀片，你可以在下面看到：
...
<div class="panel-body">
<order-view v-cloak>
<input slot="from-date" data-date-format="DD-MM-YYYY" title="DD-MM-YYYY" type="text" class="form-control" placeholder="Date" name="from_date"
浏览 0提问于2017-04-05得票数 1
1回答
动态组件中的Vue.js编辑变量
、、、、
我想做一个目标列表。(列表中的)每个元素都由一个子组件可视化。我的目标是创建一个动态列表，在那里我可以编辑元素。
我有一个父组件<contacts-list-form>，它有一个联系人数组，在<contact-element-form>中动态地显示它们。
<contact-element-form v-for="contact in contacts" :key="contact.id" :contact="contact"></contact-element-form>
联系人元素表单如下所示：
浏览 3提问于2017-09-26得票数 0
回答已采纳
1回答
通过读取，我需要添加一个双向计算属性来将表单中的数据绑定到存储区。但我需要绑定到对象上的一个项：
checked: {
'football': [],
'tennis': [],
'rugby': [],
},
在计算下：
testBinding: {
get () {
return this.$store.state.Sports.checked;
},
set (value) {
this.$store.
浏览 4提问于2019-04-03得票数 1
2回答
我有以下隐藏输入：
<input id="myHiddenInput"
name="myHiddenInput"
type="hidden"
v-model="comment.myHiddenInput"
v-on:change="comment.myHiddenInput=$event.target.value">
var app = new Vue({
el: '#app',
data: {
comment: {
浏览 0提问于2017-11-29得票数 0
我正在做一个过滤器页面，我需要存储过滤器名称和过滤器值，为此，我有一个类似这样的结构：
data: { attributes: { checkboxes: [], strings: { keys: [], values: [] }, ...
HTML应该是这样的(顺便说一句，我也在使用Laravel Blade，但这与这里无关)：
...
@if ($atribut->type == 'checkbox')
<label class="btn btn-default" for="{{ $atribut->tag }}"
浏览 4提问于2017-07-28得票数 1
1回答
我在试着用Vuetify的日期选择器。我在添加了从vuetify获取的模板后出错了。
错误: Vue警告:无效的支柱:类型检查失败的支柱“禁用”。预期的布尔值，得到值为"true“的字符串。
代码：
<v-col cols="12" md="3">
<v-menu
v-model="menu2"
:close-on-content-click="false"
浏览 2提问于2021-07-29得票数 0
回答已采纳
2回答
我已经搜索了几个小时，但仍然不知道为什么在对我的数据库进行更改时，为什么它没有立即反映在ListBox中的ListBox项上。
这是我的班级：
class Event : INotifyPropertyChanged
{
public string Name { get; set; }
public event PropertyChangedEventHandler PropertyChanged;
public string CustomerName
{
get
{
return this.Name;
浏览 3提问于2014-02-15得票数 0
回答已采纳
我在我的silverlight项目中遇到了反序列化的问题。我用这个方法和变量创建了Obj类。
public class Obj
{
private string _name;
private Uri _iconUri;
private string _stringUri;
private List<ObjItem> _items = new List<ObjItem>();
public List<ObjItem> Items
{
get { return _items; }
}
浏览 0提问于2012-01-21得票数 1
回答已采纳
在我的自定义复选框组件中，我试图将复选框表单字段的值传递给我的父组件：
<template>
<div class="custom-checkbox">
<div :class="{ 'bg-white': value }">
<input
:id="checkboxId"
type="checkbox"
:checked="value"
v-model="val
浏览 1提问于2019-12-03得票数 2
回答已采纳
1回答
可以在两个组件之间实时更新输入字段吗？
在组件中，我有一个输入字段，它有一个v-model="value“。我想将输入实时传递给另一个组件，并将其填充到输入字段中。
inputValue的数据应该作为值支持传递给组件2。还是我的结果弄错了？
构成部分1
<template>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type
浏览 4提问于2016-02-05得票数 0
回答已采纳
首先，我向你道歉。我是Vue的新手，有点挣扎。我有一个基本的搜索，我将一个关键字传递给AWS CloudSearch，然后返回JSON并显示结果。基本关键字搜索工作正常。我现在正在尝试将一个名为studenttype的数据对象传递给一个无线电列表，并基于它进行过滤。当我在外部数据文件中处理存根出的假数据时，一切都正常工作，但现在我正在获取真实数据，它不是。我知道我必须从Axios获取数据，然后将其作为选项发布到TypeFilter.vue中。我只是不知道该怎么做。谢谢你的帮助。
这是我的App.vue文件：
<template>
<div class="app
浏览 0提问于2018-08-25得票数 0
2回答
我不能使用带有文件输入的v-model，Vue说我必须使用v-on:change。好了，我可以使用v-on:change了，但是如何将输入文件的“内容”绑定到data属性呢？
假设我想在一个组件中将它绑定到this.file
export default {
data() {
file: null
},
// ...
}
下面是HTML部分：
<input id="image" v-on:change="???" type="file">
<!-- ^- d
浏览 21提问于2017-01-23得票数 30
回答已采纳
我试图在循环curl时调用内部变量。如果直接传值，它工作得很好，但是如果我作为变量传递，它总是失败。
#!/bin/bash
while IFS= read -r line || [[ -n "$line" ]];
do
curl -XPOST 'http://localhost:8080/_count?pretty' -d '
{
"query": {
"bool": {
"must": [ {
"term": {
浏览 12提问于2017-08-21得票数 0
请注意，这是一个rails应用程序。我一直在努力寻找从json文件中提取数据的最佳方法，但我似乎无法找到我想要做的事情的答案。我有一个静态数据列表，如下所示(这是一个8,000行长的列表)：
[
{"web_page": "http://www.usjc.uwaterloo.ca/", "country": "Canada", "domain": "usjc.uwaterloo.ca", "name": "University of St. Jerome
浏览 5提问于2016-05-18得票数 0
回答已采纳
2回答
当在行选择中使用v时隙:body和v复选框时，与没有任何v时隙:body的v数据表相比，我得到了一个意外的行为。当"items“对象更改时，所有复选框都在v-槽:body中被”选中“。
与我的v-复选框和没有v-槽的v-数据表使用的复选框有什么不同？是否有办法在使用身体槽的同时修复这个问题？
<v-data-table
v-model="selected"
:headers="headers"
:items="desserts"
item-key="name"
show-select
dens
浏览 3提问于2021-12-03得票数 0
回答已采纳
我有以下代码：
<template>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-outline-dark active">
<input type="radio" name="grp" v-model="channel" value="vh1" checked> VH1
</
浏览 0提问于2018-02-28得票数 5
回答已采纳
我使用Vue.js 2.5.13并具有以下结构：
component-one.vue
<template>
<div>
<input type="text" v-model="input_one">
<component-two></component-two>
</div>
</template>
<script>
import ComponentTwo from '
浏览 1提问于2018-01-29得票数 17
回答已采纳
如何创建接口或类，创建对象，并将模板值分配给对象，并在控制台上打印？
<template>
<input type="text" id="name" v-model="name" placeholder="name">
<input type="email" id="email" v-model="email" placeholder="email">
</template>
@Component({
})
expo
浏览 7提问于2020-02-13得票数 1
当页面加载时，我通过调用getGeneJSONData()来获取数据，当我执行数据库更新时，我调用相同的方法来加载新数据，并得到错误“您不能将绑定多次应用于同一元素”。
下面是代码片段
var geneViewModel = null;
var Gene = function (data) {
data = data || {};
var self = this;
self.geneValue = data.GeneValue;
self.geneCode = ko.protectedObservable(data.GeneCode);
浏览 1提问于2014-03-10得票数 4
回答已采纳
我正在尝试对用户的位置状态执行验证。我实例化了CLLocationManager，每当我尝试调用requestAlwaysAuthorization或requestWhenInUse时，都得不到自动补全值，即使我完成了键入，也得到了一个不可见的接口，因为CLLocationManager定义了这两个请求方法。我在CLLocationManager.h中验证了这一点，果然它们不在那里。仅限requestStateForRegion选择器。我正在使用google maps，每当我通过google API获取位置时，它都会提示我，所以功能在模拟器上工作，只是不确定为什么我不能直接通过CLLocati
浏览 1提问于2015-04-05得票数 0
我使用axios获取数据，并将对象设置为新数据。首先，我还使用空值声明对象。
这些数据正确地显示在我的Vue dev工具中，如果我将它记录在控制台中，但只要我在HTML中显示它
<pre>{{myObj}}</pre>
它显示旧的初始空数据。
我的代码：
export default {
data(){
return {
myObj: {
foo: "",
bar: "",
loo: {},
moo: [],
}
}
},
methods: {
getData: functio
浏览 0提问于2018-02-17得票数 1
1回答
我已经可以使用v-model从api中提取数据，但我是这样看待日期2022-04-23T13:39:00+03:00的，但我希望它以2022-04-23 13:39的方式出现。
这是我的html代码
<Field
class="form-control"
type="text"
v-model="date"
name="date"
:placeholder="$t('form.label.date')"
/>
这是我的ts代码
data() {
date:
浏览 5提问于2022-04-07得票数 0
回答已采纳
1回答
我想在变量中存储html。示例：
data: function() {
return {
my_html: '<input type="text" v-model="data"'
}
}
我希望在数据中接收用户在字段中输入的值。但是，这个连接并不是完整的例子：
var test = new Vue({
el: '#some_id',
data: function() {
return {
data: '',
my_html: '<input
浏览 0提问于2018-12-06得票数 4
回答已采纳
我需要使用v-model更新值，还需要传递一些具有更新值的字符串。
例如。<input type="range" max="100" value="50" **v-model="mybtnstyle.width '%'**">
浏览 63提问于2018-03-06得票数 1
1回答
至于其他应用程序组件，如活动、意图、广播接收器，我可以理解它们的用例，但是无论在文档中编写什么服务用例，都可以使用具有静态成员(变量和方法)的简单Java类来实现。比如如果我需要下载文件服务。我可以有一个静态的方法，将接收taskListener和其他所需的参数(例如。)在参数中下载文件异步，并将回调交给taskListener的回调方法。那我为什么要用服务。
请有人给我解释一下使用服务的原因。
浏览 3提问于2016-05-25得票数 1
回答已采纳
我试图让数据更新文本区域，而textarea中的用户输入没有更新数据(因此，v-model的双向绑定应该是单向绑定)。我偶然发现了:value属性，它对我起作用。然而，在搜索和测试之后，它似乎无法在普通的HTML和JS下工作。我也找不到任何文档，所以我想这是否是正确的方式。这个标准，有参考吗?谢谢。
编辑:这是一个片段。我希望这是一个单向绑定，因为如果我选择的话，我希望能够将文本区域的内容恢复到它的原始状态。在这种情况下，复制数据(我的应用程序需要一个深度对象克隆)是不必要的，也是浪费的。
new Vue({
el: "#app",
data: {
x: &
浏览 2提问于2020-06-21得票数 0
回答已采纳
1回答
当您使用诸如角、Angular2+和React等框架时，将数据放入UI的方式是将属性绑定到UI元素的属性上。
另一方面，当您执行标准的JS/JQuery或传统的iOS /JQuery时，可以提取一个UI元素引用，并对该引用执行所需的操作。
我的问题是，为什么所有这些基于组件的JS框架都采用数据绑定的方式，组件体系结构和UI元素引用方式之间是否存在兼容性问题？
浏览 0提问于2018-01-10得票数 2
回答已采纳
1回答
在我的一台服务器上，我安装了一个普适V8。我需要从一些表中获取数据。
也可以手动操作，只需在表上单击鼠标右键，然后导出数据。
但是，有一种方法可以自动执行这些导出吗？很抱歉，关于普及的文档非常差。
浏览 12提问于2016-09-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
