<section id="app" class="section">
    <div class="container">
      <div class="columns is-centerd">
        <div class="column">
          <h1 class="title has-text-centered">Googleニュース RSSフィードURL作成</h1>
        </div>
      </div>
      <div class="columns">
        <div class="column">
          <form class="box">
            <div class="field is-grouped">
              <div class="control is-expanded">
                <input type="input" id="keywords" class="input" v-model="keyword" placeholder="ここにキーワードを入力してください。">
              </div>
              <div class="control">
                <button id="generate" class="button is-success"  @click.prevent="addFeed" v-bind:disabled="keyword === ''">作成</button>
              </div>
            </div>
          </form>
          <form class="box" v-for="feed in feedList" key="feed.id">
            <div class="field">
              <label :for="feed.id" class="label">{{ feed.keyword }}</label>
            </div>
            <div class="field has-addons">
              <div class="control is-expanded">
                <input :id="feed.id" type="input" class="input" :value="feed.url">
              </div>
              <div class="control">
                <a :href="feed.url" class="button is-info" target="_blank"  rel="noopener">
                  開く
                </a>
              </div>
            </div>
          </form>        
        </div>
      </div>
    </div>
</section>
h1.title {
  font-size: 1.5rem;
}

#app {
  min-height: 100vh;
  background: #10c1a2;
}
// 言語と地域 設定 不具合があれば us en US に変更すること
const ned = 'jp'
const hl = 'ja'
const gl = 'JP'

const vue = new Vue({
  el: "#app",

  data: {
    keyword: "",
    feedList: [
      
    ],
  },

  methods: {
    addFeed() {
      console.log('a')
      if (this.keyword === '') {
        return
      }
      const encKw = encodeURIComponent(this.keyword)
      const url = `https://news.google.com/news/rss/headlines/section/q/${encKw}/${encKw}?ned=${ned}&hl=${hl}&gl=${gl}`
      this.feedList = [
        {
          id:  `item${Math.random()}`,
          keyword: this.keyword,
          url
        },
        ...this.feedList
      ]
      this.keyword = ''
    }
  }
});
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js