Question

问题

如何将我的变量添加到使用babel的My VueJS app中？

背景

我有一个使用Vue和Axios的应用程序。它可以正常工作，但是我添加了功能以动态地重新格式化字符串。在my pen中重新格式化字符串的代码可以正常工作。

var brewer = document.getElementsByClassName('author-raw');
for (var contrib = 0; contrib < brewer.length; contrib++) {
  var matches = brewer[contrib].innerHTML.match(/(.*)\s\<([a-z]*)\>/);
  var output = `${matches[1]} <a href="https://www.twitter.com/${matches[2]}" target="_blank">@${matches[2]}</a>`;
  brewer[contrib].closest('div').querySelector('cite').innerHTML = output;
}

我刚才需要将其添加到my beer education app

我看着documentation for vue，我想我需要将其添加到创建的块中吗？它在那里不起作用。

created() {
  //code goes here?
}

在反应中，我几乎可以做到这一点。

编辑1

我忘了我应该已经转换到ES6，所以更新的JS是

const brewer = document.getElementsByClassName('author-raw');
for (let contrib = 0; contrib < brewer.length; contrib++) {
  const matches = brewer[contrib].innerHTML.match(/(.*)\s\<([a-z]*)\>/);
  const output = `${matches[1]} <a href="https://www.twitter.com/${matches[2]}" target="_blank">@${matches[2]}</a>`;
  brewer[contrib].closest('div').querySelector('cite').innerHTML = output;
}

Answer 1

我不会尝试以这种方式操作DOM，而是操作数据。

将您的addBeer方法更改为：

addBeer() {
  axios.get('https://api.punkapi.com/v2/beers/random')
    .then(response => {
      let api = response.data[0];

      // parse contributor here
      let contributor = api.contributed_by
      let matches = contributor.match(/(.*)\s\<([a-z]*)\>/)

      let apiInfo = {
        name: api.name,
        desc: api.description,
        img: api.image_url,
        tips: api.brewers_tips,

        // and add both parts to your data
        contributor: matches[1],
        twitter: `@${matches[2]}`,

        tagline: api.tagline,
        abv: api.abv,
        food: api.food_pairing
      };
      this.beers.push(apiInfo)
      if (this.bottomVisible()) {
        this.addBeer()
      }
  })
}

并更改模板以使用解析后的数据：

<span class="author-raw" aria-hidden="true">
  {{ beer.contributor }} 
  <a style="color: white" :href="`https://www.twitter.com/${beer.twitter}`">{{beer.twitter}}</a>
</span>

这是您的codepen updated。

使用Vue，如果您开始操作DOM，除非尝试与外部库进行集成，否则几乎总是会出错。

另一种方法是编写一个小的功能组件。

const Contributor = {
  functional: true,
  render(h, context){
    const {contributor} = context.props
    // leave if there is no contributor
    if (!contributor) return null

    const parsed = contributor.match(/(.*)\s\<([A-Za-z]*)\>/)
    // leave if we couldn't parse the contributor
    if (!parsed || parsed.length < 2) return null

    const [original, name, handle] = parsed
    const twitter = `@${handle}`
    const href = `https://www.twitter.com/${twitter}`
    const props = {attrs: {href}, style:{color: "white", marginLeft: ".5em"}}
    return h("span", {attrs:{"aria-hidden": true}}, [name, h("a", props, [twitter])])
  }
}

并将模板更改为：

<div class="author">
  <contributor :contributor="beer.contributor"></contributor>
   <cite></cite>
</div>

这是您的codepen updated来显示。

将ES5函数添加到使用babel编译的vuejs应用中？

问题

背景

编辑1

1 个答案: