Question

我有一个使用Vue在其上带有搜索框的页面。我想要做的是：当用户来自另一个页面中的URL中带有参数的（例如myurl.com/?windows）时，我捕获了该参数并填充了搜索字段，以便在页面加载。如果没有参数，则什么也不会发生。

我正在使用JavaScript从URL捕获字符串，但是在运行搜索的输入中看不到如何获取它。...我创建了一个方法，但看不到如何应用它。 / p>

<div id="app">
<input type="text" v-model="search" placeholder="Search Articles" />
<div v-for="article in filteredArticles" v-bind:key="article.id" class="container-fluid to-edges section1">
    <div class="row">
         <div class="col-md-4 col-sm-12 section0">
            <div class="section0">
                <a v-bind:href="article.url" v-bind:title="toUppercase(article.title)">
                  <img class="resp-img expand section0"
                     v-bind:src="article.src"
                     v-bind:alt="article.alt"/>
                </a>
            </div>
            <div>
                <h3 class="title-sec">{{ article.title }}</h3>
                <p>{{ article.description }}</p>
          </div>
        </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var pgURL = window.location.href;
  var newURL = pgURL.split("?")[1];
  console.log(newURL);
</script>


// Filters
Vue.filter('to-uppercase', function(value){
    return value.toUpperCase();
});

new Vue({
  el: "#app",
  data: {
    articles: [
      { id: 1, title: 'Trend Alert: Black Windows', category: 'Windows', description: 'Timeless, elegant, and universally flattering, black is an excellent color to add to any wardrobe – or any window. Get in the black with this chic design trend.', src: 'http://i1.adis.ws/i/stock/Trending_Polaroid_Black_Windows_2018_1?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/trend-alert-black-windows', alt: 'Pantone Colors image' },
      { id: 2, title: 'Benefits of a Pass-Through Window', category: 'Windows', description: 'Whether you’re adding a pass-through window in order to enjoy an al fresco aperitif or for easier access to appetizers in the kitchen, we’re big fans of bringing the outdoors in.', src: 'http://i1.adis.ws/i/stock/polaroid_benefitsofapassthroughwindow655x536?$trending-mobile$', url: '/{StorefrontContextRoot}/s/trending/kitchen-pass-through-bar-window', alt: 'Benefits of a Pass-Through Window image' }, etc....
    ],
    search: ''
  },
  methods: {
        toUppercase: function(title){
          return title.toUpperCase();
        },
        urlSearch: function(newURL) {
          if (newURL) {
            return this.search = newURL;
          }
        }
  },
  computed: {
    filteredArticles: function() {
      // returning updated array based on search term
        return this.articles.filter((article) => {
        return article.category.match(new RegExp(this.search, "i"));
      });
    }
  }
})

Answer 1

您可以在安装的挂钩期间调用item_display_name_value.bindTextTo(viewModel.displayName).addTo(bindings) item_email_address_value.bindTextTo(viewModel.email).addTo(bindings) item_profile_picture_view.bindImageUrlTo(viewModel.avatarUrl).addTo(bindings)方法：

urlSearch

如何在Vue搜索框中使用查询参数？

1 个答案: