JSFiddle - React, Tailwind, and code Playground

by kurotanshi

HTML

<script src="https://unpkg.com/vue@next"></script>
  <div id="app">
    <input type="text" v-for="(c, idx) in condsList" v-model="condsList[idx]">

    <button @click="pushCond">新增條件</button>
    <br>
    <button @click="fetchData">送出查詢</button>
    
    <hr>
    
    <ul>
      <li class="block" v-for="r in result">
        <p><a :href="r.AD_URL" target="_blank">{{ r.AD_TEXT }}</a></p>
        <p>地區: {{ r.AD_CITY }}/{{ r.AD_TOWN }}</p>
        <p>總價: {{ r.AD_PRICE }}</p>
      </li>
    </ul>
    
    
  </div>

CSS

input {
  display: block;
  width: 250px;
  margin-bottom: 5px;
}

ul {
 padding: 0; 
 margin: 0;
}

p {
  margin: 10px;
}

.block {
  display: block;
  margin-right: 10px;
  border: 1px solid #000;
  padding: 10px 5px;
  width: 300px;
  height: 120px;
}

JavaScript

Vue.createApp({
  setup(){
    const result = Vue.ref([]);
    const condsList = Vue.ref(['台北市']);
    const pushCond = () => {
      if(condsList.value[condsList.value.length - 1]) {
        condsList.value.push('');
      }
    };
    
    const fetchData = () => {
      condsList.value = condsList.value.filter(d => d);
      console.log(condsList.value.join('|'));
      const keyword = escape(condsList.value.join('|'));
      fetch('https://admd.housefun.com.tw/LAYOUT.aspx?ID=393.70C639DF5E30BDEE440E4CDF599FEC2B&NUM=10&KEYWORD=' + keyword)
        .then(d => d.text() )
        .then(d => {
            let res = d.split('/*Web App AD*/')[0];
            res = res.split(/}/).filter(d => d.length > 2).map(d => JSON.parse(d + '}'));
            result.value = res;
        });
    }
    
    return {
      condsList,
      pushCond,
      fetchData,
      result
    };
    
  }
}).mount('#app');