Блог

У меня есть этот компонент из альголии

 <ais-configure 
  :hitsPerPage="3"
  :filters="filters"
/>
 

Я пытаюсь передать переменную filters, и я могу сделать это так

 filters:'rd_property_region:"London"'
 

и это работает.

Я хотел бы, чтобы часть города была динамичной, поэтому в моем разделе данных я ввел город v-модели и пытаюсь получить к нему доступ

 city:"New York",
filters:'rd_property_region:`${this.city}`' 
 

но город не сдается.

Как я должен передать переменную city в свою переменную фильтра?

Похоже, вы действительно хотите использовать вычисляемое свойство

 export default {
  data: () => ({
    city: "New York"
  }),
  computed: {
    filters: ({ city }) => `rd_property_region:"${city}"`
  }
}
 

Вот простая демонстрация…

 new Vue({
  data: () => ({
    city: "New York"
  }),
  computed: {
    filters: ({ city }) => `rd_property_region:"${city}"`
  }
}).$mount("#app") 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select v-model="city">
    <option>London</option>
    <option>Paris</option>
    <option>New York</option>
  </select>
  <pre>filters = {{ filters }}</pre>
</div> 

С вашим исходным кодом было несколько проблем.

Если вы хотели выполнить интерполяцию city в filters строку, формат должен быть одним из следующих:

• Шаблонный литерал

   `rd_property_region:"${city}"`
   

• Сцепление

   'rd_property_region:"'   city   '"'
   

Имейте в виду, однако, что это не будет реагировать на изменения, city и если вы попытаетесь сделать это в data возвращаемом значении функции, this.city это undefined произойдет при filters оценке. Вашим единственным реальным вариантом для статической, нереактивной data функции было бы что-то вроде этого

 data: () => {
  const data = { city: "New York" }
  return { ...data, filters: `rd_property_region:"${data.city}"` }
}