目前正在尝试获取 2 个下拉列表 <select>元素坐在同一条线上，因为它们一个放在另一个上面，无论我是否将它们缩短，以便它们绝对适合。
我正在使用第三方 CSS 库:Foundation by Zurb
我看过这个stackoverflow post ，但它似乎对我没有帮助。
有什么建议吗？
运行下面的代码片段以查看发生了什么
注意。我不想使用 JQuery。
const BaseUrl = "https://newsapi.org/v2/";
const ApiKey = "myapikey";
function buildUrlSource (source) {
return BaseUrl + "top-headlines?sources=" + source + "&apiKey=" + ApiKey;
}
function buildUrlCountry (country) {
return BaseUrl + "sources?language=en&country=" + country + "&apiKey=" + ApiKey;
}
const vm = new Vue({
el: '#app',
data: {
countries: [
{
name: 'Australia',
code: 'au'
},
{
name: 'USA',
code: 'us'
},
{
name: 'Britain',
code: 'gb'
},
{
name: 'Canada',
code: 'ca'
},
{
name: 'Italy',
code: 'it'
},
{
name: 'India',
code: 'in'
},
{
name: 'South Africa',
code: 'za'
},
{
name: 'Ireland',
code: 'ie'
}
],
sources: [],
results: [],
loadSource: true,
loadCountry: true,
title: '',
source: 'bbc-news', // Default news feed to BBC News
country: 'gb' // Default country to Britain (gb)
},
mounted() {
this.getSources('gb'); // Default to British News
this.getPosts('bbc-news'); // Default view to BBC News
},
methods: {
getPosts(source) {
let url = buildUrlSource(source);
axios.get(url).then((response) => {
this.results = response.data.articles;
this.title = "Top ten headlines from '" + this.source + "'";
}).catch(error => {console.log(error)})
this.loadSource = false;
},
getSources(country) {
let url = buildUrlCountry(country);
axios.get(url).then((response) => {
this.sources = response.data.sources;
}).catch(error => {console.log(error)})
this.loadCountry = true;
},
isLoaded() {
return(this.loadCountry && this.loadSource);
}
}
});<!DOCTYPE html>
<!-- NEWS APP -->
<!-- https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>The greatest news app ever</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css">
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="appCSS.css">
</head>
<body>
<div class="container" id="app">
<h3 class="text-center">Headline News</h3>
<section class="callout secondary">
<h5 class="text-center">Apply filters</h5>
<form>
<div class="row">
<div class="large-1">
<label>
Country:
<select v-model="country" v-on:change="getSources(country)">
<option v-for="item in countries" :value="item.code">{{ item.name }}</option>
</select>
</label>
<label>
News Source:
<select v-model="source" v-on:change="getPosts(source)">
<option v-for="item in sources" :value="item.id">{{ item.name }}</option>
</select>
</label>
</div>
</div>
</form>
</section>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="app.js"></script>
</body>
</html>最佳答案
因为我使用的是 Foundation CSS 库，所以我做了一些研究，发现我在 div 上遗漏了一些语法。围绕着每个 label/select标签。
看来我不见了medium-6最重要的是，columns来 self 的 <div>类标签
语法应该是这样的:
<div class="medium-6 columns">
<label>Country:
<select v-model="country" v-on:change="getSources(country)">
<option v-for="item in countries" :value="item.code">{{ item.name }}</option>
</select>
</label>
</div>
关于javascript - 一行中的多个 <select> 下拉列表(Foundation css import)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47835882/