我想根据第一个选择标记中的选定选项填充第二个选择标记。当我从第一个select标签中选择时，我从API获得了正确的响应，但是我在组件中声明的变量没有得到更新。每个其他变量都会相应更新。当我使用 vue-resource 时，只有当i 根据之前选择的选项在第一个选择中进行备用选择时，变量才会更新。使用axios没有成功。下面是示例代码的修剪版本：
<label class="col-sm-2 control-label">Bind</label>
<div class="col-sm-10">
<select class="form-control m-b" name="DataSource" v-on:change="FetchFields" V-model="BindTo">
<option value="0" selected="selected">Select a data source</option>
<option v-for="Template in Templates" :value="Template.Id" :key="Template.Id">{{ Template.TName }}</option>
</select>
</div>
<label class="col-sm-2 control-label">Data Source</label>
<div class="col-sm-10">
<select class="form-control m-b" name="Field" v-model="FieldToBind">
<option value="0" selected="selected">Select a Field</option>
<option v-for="Field in TemplateCustomFields" :value="Field.Id" :key="Field.Id">{{ Field.CName }}</option>
</select>
</div>
VueJS Part
data: () => {
return {
TemplateCustomFields: [],
CustomFieldTypeSelected: '',
ShowAdditionalFieldChoice: false,
Templates: [],
BindTo: '',
FieldToBind:'',
};
},
methods:{
FetchFields() {
console.log(this.BindTo);
if (this.BindTo != "0") {
axios({
method: 'get',
url: 'http://localhost:57802/api/gettemplatebyid',
params: {
Id: this.BindTo
}
}).then(function (response) {
this.TemplateCustomFields = response.data
})
}
}
}
答案 0 :(得分：0)
您的承诺 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="56dp"
android:baselineAligned="false"
android:gravity="center_horizontal"
android:orientation="horizontal"
android:weightSum="5">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="8dp"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:paddingTop="8dp">
<ImageView
android:id="@+id/img1"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_search"
tools:ignore="ContentDescription"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/latitude"
android:textAlignment="center"
android:textSize="12sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="8dp"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:paddingTop="8dp">
<ImageView
android:id="@+id/img2"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_search"
tools:ignore="ContentDescription"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/latitude"
android:textAlignment="center"
android:textSize="12sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:minWidth="80dp"
android:orientation="vertical"
android:paddingBottom="8dp"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:paddingTop="8dp">
<ImageView
android:id="@+id/img3"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_search"
tools:ignore="ContentDescription"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/latitude"
android:textAlignment="center"
android:textSize="12sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:minWidth="80dp"
android:orientation="vertical"
android:paddingBottom="8dp"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:paddingTop="8dp">
<ImageView
android:id="@+id/img4"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_search"
tools:ignore="ContentDescription"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/latitude"
android:textAlignment="center"
android:textSize="12sp"/>
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical"
android:paddingBottom="8dp"
android:paddingEnd="12dp"
android:paddingStart="12dp"
android:paddingTop="8dp">
<ImageView
android:id="@+id/img5"
android:layout_width="24dp"
android:layout_height="24dp"
android:scaleType="fitCenter"
android:src="@drawable/ic_search"
tools:ignore="ContentDescription"/>
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/latitude"
android:textAlignment="center"
android:textSize="12sp"/>
</LinearLayout>
</LinearLayout>
方法存在范围问题。 then中的回调会创建自己的执行上下文，因此JavaScript不会引用this实例。要解决此问题，您可以使用不会创建新Vue的{{3}}：
this或者您可以将FetchFields() {
if (this.BindTo != "0") {
axios({
method: 'get',
url: 'http://localhost:57802/api/gettemplatebyid',
params: {
Id: this.BindTo
}
}).then(response => {
this.TemplateCustomFields = response.data
})
}
分配给某些内容：
this或者您可以使用arrow function：
FetchFields() {
var self = this;
if (this.BindTo != "0") {
axios({
method: 'get',
url: 'http://localhost:57802/api/gettemplatebyid',
params: {
Id: this.BindTo
}
}).then(function(response) {
self.TemplateCustomFields = response.data
})
}