Vue.js how to make button click create a variable?

JavaScript
1

I’m working on a simple one choice adventure to work on learning Vue. I’m stuck and I’m not sure what isn’t working. Or view it on codepen. Just add this after the .io

/jarrodwhitley/pen/ywwWro?editors=1111

My HTML:

<div id="app">
  <template>
  <h2>{{ title }}</h2>
  <button @click="chooseWeapon" v-for="weapon in weapons">Take ye {{ weapon.item }}</button>
  </template>
  <!--Flask Chosen-->
  <template v-if="weaponChoice === flask">
    <h2>Victory!</h2>
    <p>Some may have frowned up choosing the flask, but you knew better. As the dragon approached you flung the flask at him with a mighty fling. The glass flask shattered up on his leathery scales and transformed him into a newt. </p>
  </template>
  <!--Axe Chosen-->
  <template v-if="weaponChoice === axe">
    <h2>Defeat!</h2>
    <p>You lifted the heavy axe and admired it's honed edge. As the dragon approached you confidently barreled forward, axe raised high. You brought the axe down upon the great lizard with a might cleave. However, the axe bounced harmlessly off the dragon's scales. The dragon promptly gobbles up you up. As parts of you are traveling down the dragon's esophagus you can't help what wonder, "What the @#$% was I thinking?"</p>
  </template>
  <!--Flagon Chosen-->
  <template v-if="weaponChoice === flagon">
    <h2>Tie?</h2>
    <p>You seize the freshly topped off flagon and stride out to meet the dragon. The dragon is about to incinerate you, but then thinks better of it. He motions towards the flagon and you nod generously. You and dragon have a seat and enjoy many round of beer together. Looks like you've made a friend.</p>
  </template>
</div>

My JS:

var flask = 'flask';
var axe = 'axe';
var flagon = 'flagon';


new Vue({
  el: "#app",
  data: {
    title: 'You must fight a dragon! Choose your weapon!',
    weapons: [
     { item: 'flask' },
     { item: 'axe' },
     { item: 'flagon' }
    ],
    weaponChoice: ''
  },
  methods: {
    chooseWeapon: function(e) {
      var clickedElement = e.target;
      var weaponChoice = 'flask';
      console.log(weaponChoice);
    }
  }
})
2

Not sure I understand what you mean.

Anyway, you have to use the weapon choices as strings, then you don’t need the vars up top.

<template v-if="weaponChoice === 'flask'">

3

The user initially has the option to press one of three buttons. I want the button to make the v-if condition true and show the appropriate div. Maybe I’m going about it all wrong though. I’m struggling to understand how this all works.

Can you demonstrate what you’re talking about?