<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
    <div class="radio_btns">
                  <div class="form_radio_btn" @click="setValue('Наличными')">
                    <input id="radio-3" type="radio" name="pay_type" value="cash" checked>
                    <label for="radio-3">Наличными</label>
                  </div>
                  <div class="form_radio_btn">
                    <input id="radio-4" type="radio" name="pay_type" value="card" @click="setValue('Картой')">
                    <label for="radio-4">Картой</label>
                  </div>
                </div>
    
    <p>Выбрано: {{ value }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 'Наличными'
    };
  },
  methods: {
    setValue(value) {
      this.value = value;
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.